小强的HTML5移动开发之路(12)——从一个多媒体标签说起
2015-09-23 13:07
786 查看
来自:http://blog.csdn.net/dawanganban/article/details/18136813
一、视频播放
<html>
<head>
<title>多媒体播放</title>
</head>
<body>
<embed src="http://demo.inwebson.com/html5-video/iceage4.mp4">
</body>
</html>
<embed>标签支持HTML5中的全局属性,同时支持HTML5中的事件属性下面我们来添加一个width属性试一下<embed src="http://demo.inwebson.com/html5-video/iceage4.mp4" width="100px"/>
type 属性规定被嵌入内容的 MIME 类型。有关MIME类型请参阅 IANA MIME 类型
例如:<!DOCTYPE html>
<html>
<body>
<embed src="/i/helloworld.swf" type="application/x-shockwave-flash" />
</body>
</html>
二、IANA MIME简介
HTML 4 增加了通过事件触发浏览器中行为的能力,比如当用户点击某个元素时启动一段 JavaScript。
下面的表格列出了可插入 HTML 5 元素中以定义事件行为的标准事件属性。
适用于 <body> 标签: 标颜色的是新标签(html5)
适用于所有 HTML 5 元素,不过最常用于表单元素中:
适用于所有 HTML 5 元素:
适用于所有 HTML 5 元素:
适用于所有 HTML 5 元素,不过在媒介元素(诸如 audio、embed、img、object 以及 video)中最常用:
下一篇将详细介绍全局属性及事件的用法
一、视频播放
<html>
<head>
<title>多媒体播放</title>
</head>
<body>
<embed src="http://demo.inwebson.com/html5-video/iceage4.mp4">
</body>
</html>
效果如下:
<embed> 标签是 HTML 5 中的新标签。
<embed> 标签是 HTML 5 中的新标签。
属性
HTML5 中的新属性。属性 | 值 | 描述 |
---|---|---|
height | pixels | 设置嵌入内容的高度。 |
src | url | 嵌入内容的 URL。 |
type | type | 定义嵌入内容的类型。 |
width | pixels | 设置嵌入内容的宽度。 |
type 属性规定被嵌入内容的 MIME 类型。有关MIME类型请参阅 IANA MIME 类型
例如:<!DOCTYPE html>
<html>
<body>
<embed src="/i/helloworld.swf" type="application/x-shockwave-flash" />
</body>
</html>
多用途互联网邮件扩展类型就是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名,以及一些媒体文件打开方式。
每个MIME类型由两部分组成,前面是数据的大类别,例如声音audio、图象image等,后面定义具体的种类。常见的MIME类型(通用型):超文本标记语言文本 .html text/htmlxml文档 .xml text/xmlXHTML文档 .xhtml application/xhtml+xml普通文本 .txt text/plainRTF文本 .rtf application/rtfPDF文档 .pdf application/pdfMicrosoft Word文件 .word application/mswordPNG图像 .png image/pngGIF图形 .gif image/gifJPEG图形 .jpeg,.jpg image/jpegau声音文件 .au audio/basicMIDI音乐文件 mid,.midi audio/midi,audio/x-midiRealAudio音乐文件 .ra, .ram audio/x-pn-realaudioMPEG文件 .mpg,.mpeg video/mpegAVI文件 .avi video/x-msvideoGZIP文件 .gz application/x-gzipTAR文件 .tar application/x-tar任意的二进制数据 application/octet-stream
三、HTML5简介HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
HTML 的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。
HTML5 是 W3C 与 WHATWG 合作的结果。
——W3C 指 World Wide Web Consortium,万维网联盟。
——WHATWG 指 Web Hypertext Application Technology Working Group。
WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。
为 HTML5 建立的一些规则:
新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
减少对外部插件的需求(比如 Flash)——内置了很多强大的多媒体标签
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备——可以在PC和移动设备上完美运行
开发进程应对公众透明
HTML5 中的一些有趣的新特性:
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素,比如 article、footer、header、nav、section
新的表单控件,比如 calendar、date、time、email、url、search
关于更多详细的HTML5可以参考我的博客专题:http://blog.csdn.net/column/details/dawanganban-html5.html
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
四、HTML5中的全局属性HTML 的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。
HTML5 是 W3C 与 WHATWG 合作的结果。
——W3C 指 World Wide Web Consortium,万维网联盟。
——WHATWG 指 Web Hypertext Application Technology Working Group。
WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。
为 HTML5 建立的一些规则:
新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
减少对外部插件的需求(比如 Flash)——内置了很多强大的多媒体标签
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备——可以在PC和移动设备上完美运行
开发进程应对公众透明
HTML5 中的一些有趣的新特性:
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素,比如 article、footer、header、nav、section
新的表单控件,比如 calendar、date、time、email、url、search
关于更多详细的HTML5可以参考我的博客专题:http://blog.csdn.net/column/details/dawanganban-html5.html
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
下面的全局属性可用于任何HTML5元素
五、全局事件属性属性 | 描述 |
---|---|
accesskey | 规定访问元素的键盘快捷键 |
class | 规定元素的类名(用于规定样式表中的类)。 |
contenteditable | 规定是否允许用户编辑内容。 |
contextmenu | 规定元素的上下文菜单。 |
dir | 规定元素中内容的文本方向。 |
draggable | 规定是否允许用户拖动元素。 |
dropzone | 规定当被拖动的项目/数据被拖放到元素中时会发生什么。 |
hidden | 规定该元素是无关的。被隐藏的元素不会显示。 |
id | 规定元素的唯一 ID。 |
lang | 规定元素中内容的语言代码。 |
spellcheck | 规定是否必须对元素进行拼写或语法检查。 |
style | 规定元素的行内样式。 |
tabindex | 规定元素的 tab 键控制次序。 |
title | 规定有关元素的额外信息。 |
HTML 4 增加了通过事件触发浏览器中行为的能力,比如当用户点击某个元素时启动一段 JavaScript。
下面的表格列出了可插入 HTML 5 元素中以定义事件行为的标准事件属性。
Window 事件属性
window 对象触发的事件。适用于 <body> 标签: 标颜色的是新标签(html5)
属性 | 值 | 描述 |
---|---|---|
onafterprint | script | 在打印文档之后运行脚本 |
onbeforeprint | script | 在文档打印之前运行脚本 |
onbeforeonload | script | 在文档加载之前运行脚本 |
onblur | script | 当窗口失去焦点时运行脚本 |
onerror | script | 当错误发生时运行脚本 |
onfocus | script | 当窗口获得焦点时运行脚本 |
onhaschange | script | 当文档改变时运行脚本 |
onload | script | 当文档加载时运行脚本 |
onmessage | script | 当触发消息时运行脚本 |
onoffline | script | 当文档离线时运行脚本 |
ononline | script | 当文档上线时运行脚本 |
onpagehide | script | 当窗口隐藏时运行脚本 |
onpageshow | script | 当窗口可见时运行脚本 |
onpopstate | script | 当窗口历史记录改变时运行脚本 |
onredo | script | 当文档执行再执行操作(redo)时运行脚本 |
onresize | script | 当调整窗口大小时运行脚本 |
onstorage | script | 当文档加载加载时运行脚本 |
onundo | script | 当 Web Storage 区域更新时(存储空间中的数据发生变化时) |
onunload | script | 当用户离开文档时运行脚本 |
表单事件
由 HTML 表单内部的动作触发的事件。适用于所有 HTML 5 元素,不过最常用于表单元素中:
属性 | 值 | 描述 |
---|---|---|
onblur | script | 当元素失去焦点时运行脚本 |
onchange | script | 当元素改变时运行脚本 |
oncontextmenu | script | 当触发上下文菜单时运行脚本 |
onfocus | script | 当元素获得焦点时运行脚本 |
onformchange | script | 当表单改变时运行脚本 |
onforminput | script | 当表单获得用户输入时运行脚本 |
oninput | script | 当元素获得用户输入时运行脚本 |
oninvalid | script | 当元素无效时运行脚本 |
onreset | script | 当表单重置时运行脚本。HTML 5 不支持。 |
onselect | script | 当选取元素时运行脚本 |
onsubmit | script | 当提交表单时运行脚本 |
键盘事件
由键盘触发的事件。适用于所有 HTML 5 元素:
属性 | 值 | 描述 |
---|---|---|
onkeydown | script | 当按下按键时运行脚本 |
onkeypress | script | 当按下并松开按键时运行脚本 |
onkeyup | script | 当松开按键时运行脚本 |
鼠标事件
由鼠标或相似的用户动作触发的事件。适用于所有 HTML 5 元素:
属性 | 值 | 描述 |
---|---|---|
onclick | script | 当单击鼠标时运行脚本 |
ondblclick | script | 当双击鼠标时运行脚本 |
ondrag | script | 当拖动元素时运行脚本 |
ondragend | script | 当拖动操作结束时运行脚本 |
ondragenter | script | 当元素被拖动至有效的拖放目标时运行脚本 |
ondragleave | script | 当元素离开有效拖放目标时运行脚本 |
ondragover | script | 当元素被拖动至有效拖放目标上方时运行脚本 |
ondragstart | script | 当拖动操作开始时运行脚本 |
ondrop | script | 当被拖动元素正在被拖放时运行脚本 |
onmousedown | script | 当按下鼠标按钮时运行脚本 |
onmousemove | script | 当鼠标指针移动时运行脚本 |
onmouseout | script | 当鼠标指针移出元素时运行脚本 |
onmouseover | script | 当鼠标指针移至元素之上时运行脚本 |
onmouseup | script | 当松开鼠标按钮时运行脚本 |
onmousewheel | script | 当转动鼠标滚轮时运行脚本 |
onscroll | script | 当滚动元素滚动元素的滚动条时运行脚本 |
媒介事件
由视频、图像以及音频等媒介触发的事件。适用于所有 HTML 5 元素,不过在媒介元素(诸如 audio、embed、img、object 以及 video)中最常用:
属性 | 值 | 描述 |
---|---|---|
onabort | script | 当发生中止事件时运行脚本 |
oncanplay | script | 当媒介能够开始播放但可能因缓冲而需要停止时运行脚本 |
oncanplaythrough | script | 当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本 |
ondurationchange | script | 当媒介长度改变时运行脚本 |
onemptied | script | 当媒介资源元素突然为空时(网络错误、加载错误等)运行脚本 |
onended | script | 当媒介已抵达结尾时运行脚本 |
onerror | script | 当在元素加载期间发生错误时运行脚本 |
onloadeddata | script | 当加载媒介数据时运行脚本 |
onloadedmetadata | script | 当媒介元素的持续时间以及其他媒介数据已加载时运行脚本 |
onloadstart | script | 当浏览器开始加载媒介数据时运行脚本 |
onpause | script | 当媒介数据暂停时运行脚本 |
onplay | script | 当媒介数据将要开始播放时运行脚本 |
onplaying | script | 当媒介数据已开始播放时运行脚本 |
onprogress | script | 当浏览器正在取媒介数据时运行脚本 |
onratechange | script | 当媒介数据的播放速率改变时运行脚本 |
onreadystatechange | script | 当就绪状态(ready-state)改变时运行脚本 |
onseeked | script | 当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本 |
onseeking | script | 当媒介元素的定位属性为真且定位已开始时运行脚本 |
onstalled | script | 当取回媒介数据过程中(延迟)存在错误时运行脚本 |
onsuspend | script | 当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本 |
ontimeupdate | script | 当媒介改变其播放位置时运行脚本 |
onvolumechange | script | 当媒介改变音量亦或当音量被设置为静音时运行脚本 |
onwaiting | script | 当媒介已停止播放但打算继续播放时运行脚本 |
相关文章推荐
- 小强的HTML5移动开发之路(12)——从一个多媒体标签说起
- 低版本IE支持HTML5
- HTML5实现下雪实例
- Html5学习之旅-html5的留言记事本开发(17)
- Html5学习之旅-html5的留言记事本开发(17)
- Html5学习之旅-html5的留言记事本开发(17)
- Html5学习之旅-html5的留言记事本开发(17)
- html5
- html5语法改变
- HTML5学习笔记之video标签
- HTML5学习笔记之audio标签
- Html5的学习之旅-Html5的web Storage概述(16)
- Html5的学习之旅-Html5的web Storage概述(16)
- Html5的学习之旅-Html5的web Storage概述(16)
- Html5的学习之旅-Html5的web Storage概述(16)
- HTML5的3D效果
- 实时视频h5
- HTML5+CSS
- 小强的HTML5移动开发之路(11)——链接,图片,表格,框架
- 小强的HTML5移动开发之路(11)——链接,图片,表格,框架