毫无疑问,关于HTML5的一个最受欢迎的以及谈论最多的特性是其在不借助诸如Flash Player等第三方插件的情况下,直接在你的网页上嵌入视频组件的能力。
浏览器提供原生支持视频的新能力使得网页开发人员更易于在不依赖于外置插件有效性的情况下,在他们的网站上添加视频组件。由于苹果公司现阶段在iPhone和iPad上使用的Flash技术的局限性,传输HTML5视频的能力就显得尤为重要了。
这篇教程主要向你介绍video元素及其属性,以及它所支持的不同的视频类型。这是这一系列三篇教程中的第一篇,主要涵盖了video(标签),audio标签以及这两种标签使用的自定义控制等方面的内容。
如果你使用Flash Player创建一个在网站上播放的简单的MP4视频,你可能会用到下面的代码:
- <object type="application/x-shockwave-flash"
- data="player.swf?videoUrl=myVideo.mp4&autoPlay=true" height="210" width="300">
- <param name="movie" value="player.swf?videoUrl=myVideo.mp4&autoPlay=true">
- </object>
如果使用的是HTML5,你可以使用以下代码:
- <video src="myVideo.mp4" controls autoplay width="300" height="210"></video>
当然,这个HTML5示例是极端简化了的,但是它所实现的功能是一样的,你也可以看出这是多么的简单。
视频编码解码器是一款可以对特定文件格式的视频进行编码或解码的软件。虽然HTML5标准最初强制支持Theora Ogg视频编码解码器,但在受到Apple和Nokia的反对之后,这个要求就从标准中去除掉了。
令人遗憾的是,这就意味着不同的浏览器支持不同的编码解码器,这听起来确实让人痛苦啊。但最近情况有所改善,你只需要(向不同的浏览器)提供两种不 同格式的视频内容:向Safari和Internet Explorer 9提供MP4/H.264格式视频,向Firefox,Chrome和Opera提供WebM格式视频。Firefox也支持Theora Ogg,但在版本4之后就开始支持WebM格式了。