HTML5 Video 概论

HTML5  Video  概论  

1 Video介绍

引用我翻译文档《在HTML5页面中嵌入音频和视频》中的介绍文字：「当今，在网页上嵌入视频且所有用户不管使用任何浏览器或者操作系统都能看到的唯一可靠方法是使用Flash。这需要Adobe Flash插件，并且结合<object>和<embed>标签。

大多数用户已经安装了Flash插件（事实上，大概95%的上网用户都装有Flash的某个版本），但HTML 5的支持者正在推动一个开放的，不需要任何插件的视频标准。这就是HTML 5的新标签<video>带来的构想，他提供了一个嵌入视频（以及与其交互）而不需要类似Flash的私有插件的方法。

不幸的是，视频并非那么简单。不仅仅是浏览器需要理解<video>标签，而且需要一个必要的编码译码器来播放视频。明显的解决方法只能是HTML 5规范的缔造者们选择一个视频编码译码器，并且让每一个浏览器制造商执行。

 

 

总之，这就是所推荐的打算。同时，这也是引起混乱的导火索。对于各种各样编码译码器的争论就已经很烦杂了，但更悲剧的事情是，浏览器制造商们还不能就此达成统一。苹果不愿意使用提议的Ogg Theora编码译码器，但Opera和Mozilla也不愿意支付由于他们的浏览器装载H.264编码译码器而造成的许可费用。Google同时支持两者，微软面对争论，远远的置身事外，因为他现在根本没有计划去支持HTML 5的视频元素。

面对浏览器制造商的僵持局面，HTML 5善意的独裁者Ian Hickson甩了甩他的手并说到去他妈的。所以HTML 5规范中没有特别指名或规定的视频编码译码器。」好吧，引用到这儿。

如今的情况是，微软终于陷进去了，但很悲剧的是，在IE 9中只支持H.264。同时，Googe终于在I/O大会上发布了开源的视频封装格式webM和视频编码格式VP8。Opera、Mozilla、 Chrome宣布将完全支持VP8，IE宣布部分支持（需要装一个插件，但如果我没记错的话，HTML5的一个愿景就是脱离浏览器插件，微软真是让人觉得悲剧）。

苹果决定不支持VP8，乔布斯认为VP8在质量或效率方面不如H.264，不能满足其产品的要求。另外最新消息表明VP8还有可能牵扯到专利的问题（如果真的侵犯专利的话，Opera和Firefox估计马上会无视VP8的）。

说了这么多，其实说到底就是，现在如果要在页面中使用<video>标签，需要考虑三种情况，支持Ogg Theora或者VP8（如果这玩意儿没出事的话）的（Opera、Mozilla、Chrome），支持H.264的（Safari、IE 9、Chrome），都不支持的（IE6、7、8）。

好吧，现在让我们从技术层面来认识HTML 5的视频，包括<video>标签的使用，视频对象可以用到的媒介属性和方法，以及媒介事件。

2 Video标签的使用

Video标签含有src、poster、preload、autoplay、loop、controls、width、height等几个属性，以及一个内部使用的标签<source>。

Video卷标内除了可以包含<source>标签外，还可以包含当指定的视频都不能播放时，返回的内容。

2.1 src属性和poster属性

你能想象src属性是用来干啥的。跟<img>卷标的一样，这个属性用于指定视频的地址。

而poster属性用于指定一张图片，在当前视频数据无效时显示（预览图）。视频数据无效可能是视频正在加载，可能是视频地址错误等等。

 

 2.2 preload属性

这个属性也能通过名字了解用处，此属性用于定义视频是否预加载。属性有三个可选择的值：none、metadata、auto。如果不使用此属性，默认为auto。

None：不进行预加载。使用此属性值，可能是页面制作者认为用户不期望此视频，或者减少HTTP请求。

Metadata：部分预加载。使用此属性值，代表页面制作者认为用户不期望此视频，但为用户提供一些元数据（包括尺寸，第一帧，曲目列表，持续时间等等）。

Auto：全部预加载。

 2.3 autoplay属性

又是一个看名字知道用处的属性。Autoplay属性用于设置视频是否自动播放，是一个布尔属性。当出现时，表示自动播放，去掉是表示不自动播放。

注意，HTML中布尔属性的值不是true和false。正确的用法是，在卷标中使用此属性表示true，此时属性要么没有值，要么其值恒等于他的名字（此处，自动播放为<videoautoplay />或者<videoautoplay=」autoplay」 />）；而在卷标中不使用此属性表示false（此处不进行自动播放为<video/>）。

 2.4 loop属性

一目了然，loop属性用于指定视频是否循环播放，同样是一个布尔属性。

 2.5 controls属性

Controls属性用于向浏览器指明页面制作者没有使用脚本生成播放控制器，需要浏览器启用本身的播放控制栏。

控制栏须包括播放暂停控制，播放进度控制，音量控制等等。

每个浏览器默认的播放控制栏在界面上不一样。由于我浏览器的诡异问题，Firefox和Safari的Video不正常，所以这两个只能在网上找截图了。

 2.6 width属性和height属性

属于卷标的通用属性了，这个不用多说。

2.7 source标签

Source卷标用于给媒体（因为audio卷标同样可以包含此卷标，所以这儿用媒体，而不是视频）指定多个可选择的（浏览器最终只能选一个）文件地址，且只能在媒体卷标没有使用src属性时使用。

浏览器按source卷标的顺序检测卷标指定的视频是否能够播放（可能是视频格式不支持，视频不存在等等），如果不能播放，换下一个。此方法多用于兼容不同的浏览器。Source标签本身不代表任何含义，不能单独出现。

此卷标包含src、type、media三个属性。

src属性：用于指定媒体的地址，和video卷标的一样。

Type属性：用于说明src属性指定媒体的类型，帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。具体的属性值，请参见W3C的文檔。

Media属性：用于说明媒体在何种媒介中使用，不设置时默认值为all，表示支持所有媒介。你想到<style>标签的media属性了么？一样一样一样的。

 2.8一个完整的例子

这段代码在页面中定义了一个视频，此视频的预览图为poster的属性值，显示浏览器的默认媒体控制栏，预加载视频的元数据，循环播放，宽度为 900像素，高度为240像素。

第一选择视频地址为第一个source卷标的src属性值，视频类别为Ogg视频，视频编码译码器为Theora，音频编码译码器为Vorbis，播放媒介为显示器；第二选择视频地址不再累述。

如果你还要兼容IE的话，可以在最后一个source标签后再加上Flash播放器的标签集，或者使用一点JavaScript代码。具体可以查看这篇文章。

3媒介属性

媒介属性包括error、currentsrc、networkState、preload、buffered、readyState、 seeking、currentTime、startTime、duration、paused、defaultPlaybackRate、 playbackRate、played、seekable、ended、autoplay、loop、controls、volume、muted等，可以用于返回或改变媒介的状态。

注意：以下使用到的「media」统一代表一个视频元素。如下图所示：

3.1 error属性

只读属性。使用media.error返回一个MediaError对象表明当前的错误状态，如果没有出错，返回null。

使用media.error.code返回媒介的错误状态，共有4个可能值。

MEDIA_ERR_ABORTED（数字值为1）：媒体资源获取异常；

MEDIA_ERR_NETWORK（数字值为2）：网络错误；

MEDIA_ERR_DECODE（数字值为3）：媒体译码错误；

MEDIA_ERR_SRC_NOT_SUPPORTED（数字值为4）：视频格式被不支持。

 

3.2 currentSrc属性

只读属性。使用media.currentSrc返回该媒介卷标的src属性值。

 

3.3 networkState属性

只读属性。使用media.networkState返回媒介的网络状态，共有4个可能值。

NETWORK_EMPTY（数字值为0）：尚未初始化；

NETWORK_IDLE（数字值为1）：加载完成，网络空闲；

NETWORK_LOADING（数字值为2）：视频加载中；

NETWORK_NO_SOURCE（数字值为3）：加载失败。

3.4 preload属性

可擦写属性。使用media.preload返回媒介卷标的preload属性值，或者对其进行赋值，改变媒介卷标的preload属性值。 

3.5 buffered属性

只读属性。使用media.buffered返回一个TimeRanges对象，确认浏览器已缓存媒介文件。

3.6 readyState属性

只读属性。使用media.readyState返回媒介当前播放位置的就绪状态，共有5个可能值。

HAVE_NOTHING（数字值为0）：当前播放位置无有效媒介资源；

HAVE_METADATA（数字值为1）：加载中，媒介资源确认存在，但当前位置没有能够加载到有效媒介数据进行播放；

HAVE_CURRENT_DATA（数字值为2）：已获取到当前播放数据，但没有足够的数据进行播放；

HAVE_FUTURE_DATA（数字值为3）：已获取到后续播放数据，可以进行播放；

HAVE_ENOUGH_DATA（数字值为4）：可以进行播放，且浏览器确认媒体数据以某一种速度进行加载，可以保证有足够的后续数据进行播放，而不会使浏览器的播放进度赶上加载数据的末端。

3.7 seeking、seekable属性

均为只读属性。

使用media.seeking返回一个布尔值，表明浏览器是否正在请求数据，ture表示浏览器正在请求数据，false表示浏览器已停止请求。

使用media.seekable发挥一个TimeRanges对象，表明可以对当前媒介资源进行请求。

3.8 currentTime、startTime、duration属性

三者的值均为时间，单位为秒，currentTime为可擦写属性，其余两个均为只读属性。

使用media.currentTime返回当前媒介的播放位置，或者对其赋值，改变媒介的播放位置。

对于使用media.currentTime的时候，如果返回的时间超出了浏览器的请求能力，将抛出一个INDEX_SIZE_ERR异常；如果没有选中的媒体资源，将抛出一个INVALID_STATE_ERR异常。

使用media.startTime返回媒介文件播放的开始时间，通常为0。

使用media.duration返回媒介文件总的播放时长。

 

3.9 played、paused、ended属性

三者均为只读属性。

使用media. played返回一个TimeRanges对象，标明浏览器已播放的媒介资源范围。

使用media.paused返回一个布尔值，表明媒介是否暂停播放，ture表示媒介暂停播放，false表示媒介正在播放。

使用media.ended返回一个布尔值，表明媒介是否已结束，ture表示媒介已经播放完毕，false表示还未播放完毕。

3.10 defaultPlaybackRate、playbackRate属性

两者均为可擦写属性。

使用media.defaultPlaybackRate返回媒介默认的播放速率，或对其赋值，改变媒介的默认播放速率。

使用media.playbackRate返回当前的媒介播放速率，或对其赋值，改变当前的媒介播放速率。

3.11 autoplay、loop属性

两者均为可擦写属性。

使用media.autoplay返回一个布尔值，表明当前媒介是否设置了自动播放，ture表示当前媒介为自动播放，false表示非自动播放，或对其赋值，设置是否自动播放。

使用media.loop返回一个布尔值，表明当前媒介是否设置了循环播放，ture表示当前媒介设置了循环播放，false表示没有设置循环播放，或对其赋值，设置是否循环播放。

 

3.12 controls、volume、muted属性

三者均为可擦写属性。

使用media.controls返回一个布尔值，表明当前媒介是否使用了浏览器默认的播放控制栏，ture表示加载了，false表示没有加载，或对其赋值，设置是否使用浏览器默认的播放控制栏。

使用media.volume返回当前媒介的音量值，或对其赋值，改变媒介的播放音量，范围为0到1，0相当于静音，1为最大音量。

使用media.muted返回一个布尔值，表明当前媒介播放是否开启静音，ture表示没有开启静音，false表示静音，或对其赋值，设置播放是否静音。

4媒介方法

4.1 play()、pause()、load()方法

使用media.play()播放视频，并会将media.paused的值强行设为false。

使用media.pause()暂停视频，并会将media.paused的值强行设为ture。

使用media.load()重载视频，并会将media.playbackRate的值强行设为 media.defaultPlaybackRate的值，且强行将media.error的值设为null。

 

4.2 canPlayType(type)方法

使用canPlayType(type)方法测试浏览器是否支持特定的媒介类型。其中，type参数和1.1.7节中介绍的type属性是相同的。

方法返回3个可能值（均为浏览器判断的结果）。

空字符串：浏览器不支持此种媒体类型；

maybe：浏览器可能支持此种媒体类型；

probably：浏览器确定支持此种媒体类型。

5媒介事件

媒介事件可以作用于各种媒介元素，如视频、音频、图片等，主要包括loadstart、progress、suspend、abort、 error、emptied、stalled、play、pause、loadedmetadata、loadeddata、waiting、 playing、canplay、canplaythrough、seeking、seeked、timeupdate、ended、 ratechange、durationchange、volumechange等事件。

5.1事件处理方式

一般有两种方式处理事件。

一种是监听的方式：addEventListener(「事件名」,处理函数,处理方式)。例如，如果需要在浏览器对媒介进行播放时执行begin_playing函数，那么可以这样，media.addEventListener(「play」, begin_playing,false)。

另一种是直接赋值的方式：on时间名=处理函数，这是我们相对用的较多的方法，也就是「当XXX事件触发时」。例如，要进行和上面相同的处理，可以这样media.onplay= begin_playing。

5.2事件介绍

 

6 Video完结

W3C网站上有一个关于HTML 5视频的举例，很好的说明了所有前面介绍的卷标的使用，属性和方法以及事件的应用，非常直观。随便还可以通过这个页面查看浏览器对HTML 5视频各个方面的支持情况。

文档的第一章，关于HTML 5视频的相关知识背景和技术规范就差不多介绍完了，整章的内容不是文字就是代码，有图也几乎是代码截图。后续还会有第二章、第三章……HTML 5引入了很多强大的新内容，我们有很多东西需要去学

 

原文链接：http://phperwuhan.blog.163.com/blog/static/4114260220120175465680/