一、视频播放
<html>
<head>
<title>多媒体播放</title>
</head>
<body>
<embed src="http://demo.inwebson.com/html5-video/iceage4.mp4">
</body>
</html>
效果如下:
<embed> 标签是 HTML 5 中的新标签。
属性
HTML5 中的新属性。
属性
值
描述
height |
pixels |
设置嵌入内容的高度。 |
src |
url |
嵌入内容的 URL。 |
type |
type |
定义嵌入内容的类型。 |
width |
pixels |
设置嵌入内容的宽度。 |
<embed>标签
支持HTML5中的全局属性,同时支持HTML5中的事件属性
下面我们来添加一个width属性试一下
<embed src="http://demo.inwebson.com/html5-video/iceage4.mp4" width="100px"/>
type 属性规定被嵌入内容的 MIME 类型。
<!DOCTYPE html>
<html>
<body>
<embed src="/i/helloworld.swf" type="application/x-shockwave-flash" />
</body>
</html>
二、IANA MIME简介
多用途互联网邮件扩展类型就是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名,以及一些媒体文件打开方式。
每个MIME类型由两部分组成,前面是数据的大类别,例如声音audio、图象image等,后面定义具体的种类。
常见的MIME类型(通用型):
xml文档 .xml text/xml
XHTML文档 .xhtml application/xhtml+xml
普通文本 .txt text/plain
RTF文本 .rtf application/rtf
PDF文档.pdf application/pdf
Microsoft Word
文件.word application/msword
PNG图像 .png image/png
GIF图形 .gif image/gif
JPEG图形 .jpeg,.jpg image/jpeg
MIDI音乐
文件mid,.midi audio/midi,audio/x-midi
RealAudio音乐
文件.ra, .ram audio/x-pn-realaudio
MPEG
文件.mpg,.mpeg video/mpeg
AVI
文件.avi video/x-msvideo
TAR
文件.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中的全局属性
下面的全局属性可用于任何HTML5元素
五、全局事件属性
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 |
当媒介已停止播放但打算继续播放时运行脚本 |
下一篇将详细介绍全局属性及事件的用法
分享到:
相关推荐
尤其是有洁癖的人更是如此,总是喜欢时不时的杀进程杀服务,可是由于android开源的特殊性,你会发现被干掉的服务又一次的重新复活了,总之生命力极其强悍,业界称之为——打不死的小强。这里是它怎么做的,哈哈
小强老师《零基础学习软件测试》系列视频之QTP使用指南——界面分析
“小强一号”——实验机器人制作过程(图文.docx
小强老师《零基础学习软件测试》系列视频之QTP使用指南
小强的HTML5移动开发之路系列博客中的一个视频播放器的例子。
小强老师《零基础学习软件测试》系列视频之QTP使用指南
详细请看《 小强的HTML5移动开发之路(42)》:http://blog.csdn.net/column/details/dawanganban-html5.html
小强多个模版替换 小强多个模版替换 小强多个模版替换 小强多个模版替换 小强多个模版替换
ASP实例开发源码—一个非常小巧的自动更新asp新闻系统 小强修正版.zip ASP实例开发源码—一个非常小巧的自动更新asp新闻系统 小强修正版.zip ASP实例开发源码—一个非常小巧的自动更新asp新闻系统 小强修正版.zip
小强多个模版替换 快速发布信息,让你的工作更有效率。
里面有小强开发板程序,对初学者有很大帮助
小强老师软件测试基础课程5-软件质量基础知识
小强影音盒是一个在线电影和视频播放器,能播放网上的海量电影。如果想看最新版本到:http://www.5aie.com/xiaoqiangplayer/flvshuoming.htm 查看。
小强开发板原理图版本,在网上是很不好找到的 ,不过需要的人可能也不多
现在,一个开源开发者小组想让每一家公司都能够通过使用这种完全基于网络的云计算系统来搭建如小强般顽强的网站。他们为项目命名为“CockroachDB”(“小强DB”),在宣传中称该项目是“具有超强生命力的数据库”。...
小强通话时间统计,显示归属地,统计指定号码通话时间
小强升职记 实现目标思维导图
小强PDF工具包中文免费版集PDF阅读_编辑_管理_创建等于一体