阅读html5标准文档,W3C HTML5标准阅读笔记 - 多媒体元素

HTML5中，video元素与audio元素统称多媒体元素(media elements)，由于多媒体元素(以下简称media元素)在功能上比其它普通的页面元素要复杂，因此在DOM中media元素的属性也相对来说更加丰富。

error

media元素拥有一个名为error的属性。当一切正常时，error属性值为null；当发生错误时，error属性值为一个MediaError对象，该MediaError对象的code属性值表示具体的错误原因。

currentSrc

media元素的currentSrc属性意指当前播放的多媒体源文件地址，具体对应video/audio标签的src值，或其内部当前播放的source元素的src值。

canPlayType(type)

media元素的canPlayType()方法用于检测特定格式(MIME Type)及编码(codecs)的媒体文件是否可以进行播放，其中传入参数的编码(codecs)部分可以省略。

以ele.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')为例，其返回值的情况为：

当浏览器不支持该MIME Type，或传入的type参数值为application/octet-stream这一通用二进制格式时，返回空字符串。

当浏览器有信心能支持该type的多媒体文件播放时，返回“probably”。标准规定，当传入的type参数值不包含编码(codecs)信息时，该方法调用不应当返回“probably”。

当浏览器不确定是否能播放该type的多媒体文件时，返回“maybe”。

networkState

media元素的networkState属性表示当前媒体资源的网络通信情况，其可选项为：

0 (NETWORK_EMPTY)。元素尚未被初始化，所有属性均为默认初始值。

1 (NETWORK_IDLE)。媒体资源已选定，但尚未开始下载。

2 (NETWORK_LOADING)。媒体资源下载中。

3 (NETWORK_NO_SOURCE)。无法找到可用的媒体资源。

load()

调用media元素的load()方法，会使得该media元素重新开始加载媒体资源。

buffered、duration、currentTime

访问media元素的buffered属性将会得到一个TimeRanges对象，在该TimeRanges对象中包含了当前已缓存的时间范围。标准规定，对于已经缓存的数据，浏览器可以根据情况自行丢弃掉。

media元素的duration属性表示媒体资源的时间长度(以秒为单位)，如果该时间长度信息不可用，则返回NaN。

media元素的currentTime属性表示当前播放位置(以秒为单位)，此属性值可被重新设定，从而调整当前的播放点。

readyState

media元素的readyState属性表示video/audio标签的状态。

播放属性

media元素具有多个属性，用来表示播放的状态和方法：

paused。boolean属性，表示当前是否播放暂停。

ended。boolean属性，表示当前是否已播放结束。

defaultPlaybackRate。默认播放速度(0意为停止，1意为正常播放速度)，当用户快速切换到一个新的时间点进行播放时，切换后的初始播放速度即为此defaultPlaybackRate值。

playbackRate。当前播放速度。

played。返回TimeRanges对象，表示已经播放过的时间段。

play()。调用此方法时，执行播放操作。如果播放已经结束，则重新开始播放。值得注意的是，在iOS的Safari浏览器中，为了防止打开页面立即播放导致流量损失，play()方法和load()方法在用户手动开始播放操作之前是无效的(链接)。

audioTracks、videoTracks

访问media元素的audioTracks属性将得到一个AudioTrackList对象，表示所有的音轨数据；而访问media元素的videoTracks属性将得到一个VideoTrackList对象，表示所有的视轨数据。

对于所有的media对象，永远只存在一个AudioTrackList对象和一个VideoTrackList对象；即使是媒体源文件被替换的情况下，这两个对象也只是被重用，而不是丢弃后新建。

MediaController

每一个media元素都拥有一个叫做controller的属性，用于表示当前media元素所从属的MediaController对象 -- 可以通过将多个media元素的controller属性定义为同一个MediaController对象，使得有一处地方可以同时控制多个video/audio。

MediaController对象与media对象一样，具有readyState、play()等属性和操作方法。

多媒体元素最佳实践

由于手机上的计算资源有限，因此对于需要支持手机端访问的网页来说，标准建议在播放完视频/音频后，如果无需重新播放，则立即释放该资源。具体的释放操作有2种：

移除对video/audio的使用，使其可被垃圾收集。

(标准推荐做法)移除video/audio对象的src属性，及其所有的source子元素，然后重新调用其load()方法。