HTML 5视频的相关知识背景和技术规范(2)

每个浏览器默认的播放控制栏在界面上不一样。由于我浏览器的诡异问题，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）：加载失败。