W3C HTML5标准阅读笔记 - 多媒体元素

标准原文:https://www.w3.org/TR/html5/embedded-content-0.html#media-elements

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"')为例,其返回值的情况为:

  1. 当浏览器不支持该MIME Type,或传入的type参数值为application/octet-stream这一通用二进制格式时,返回空字符串。
  2. 当浏览器有信心能支持该type的多媒体文件播放时,返回“probably”。标准规定,当传入的type参数值不包含编码(codecs)信息时,该方法调用不应当返回“probably”。
  3. 当浏览器不确定是否能播放该type的多媒体文件时,返回“maybe”。

networkState

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

  • 0 (NETWORK_EMPTY)。元素尚未被初始化,所有属性均为默认初始值。
  • 1 (NETWORK_IDLE)。媒体资源已选定,但尚未开始下载。
  • 2 (NETWORK_LOADING)。媒体资源下载中。
  • 3 (NETWORKNOSOURCE)。无法找到可用的媒体资源。

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种:

  1. 移除对video/audio的使用,使其可被垃圾收集。
  2. (标准推荐做法)移除video/audio对象的src属性,及其所有的source子元素,然后重新调用其load()方法。

Chuan Shao

Read more posts by this author.

Shanghai

Subscribe to Chuan's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!