3

2. MediaSource Object

MediaSource对象表示HTMLMediaElement元素的一个媒体数据源。它会记录源的readyState和一个可以添加媒体数据去展示的SourceBuffer对象的列表。MediaSource对象由web应用创建然后绑定到HTMLMediaElement元素上。web应用通过添加SourceBuffer对象给sourceBuffers属性从而添加媒体数据到source中。当需要播放的时候,HTMLMediaElement从MediaSource对象中读取媒体数据。

每个MediaSource对象都由一个实时的可检索的range变量来存储归一化后的TimeRanges对象。当MediaSource对象创建的时候这个变量初始化为一个空的TimeRanges对象,通过setLiveSeekableRange() 和 clearLiveSeekableRange()方法来维护,然后通过HTMLMediaElement Extensions 来更改HTMLMediaElement.seekable属性。
ReadyState

状态值 描述
closed 表示source还没有绑定到media元素上
open source被media元素打开并且有可用的SourceBuffer对象在sourceBuffers中
ended source还被绑定在media元素上,但是endOfStream() 执行过了

构造函数

[Constructor]
interface MediaSource : EventTarget {
    readonly attribute SourceBufferList    sourceBuffers;
    readonly attribute SourceBufferList    activeSourceBuffers;
    readonly attribute ReadyState          readyState;
             attribute unrestricted double duration;
             attribute EventHandler        onsourceopen;
             attribute EventHandler        onsourceended;
             attribute EventHandler        onsourceclose;
    SourceBuffer addSourceBuffer(DOMString type);
    void         removeSourceBuffer(SourceBuffer sourceBuffer);
    void         endOfStream(optional EndOfStreamError error);
    void         setLiveSeekableRange(double start, double end);
    void         clearLiveSeekableRange();
    static boolean isTypeSupported(DOMString type);
};

2.1 属性值

sourceBuffers 类型:SourceBufferList,只读
MediaSource相关的SourceBuffer列表,当readyState=="closed"的时候总是空的,一旦readyState变为"open"状态时,就可以通过 addSourceBuffer()方法添加SourceBuffer对象到列表中

activeSourceBuffers 类型:SourceBufferList,只读

sourceBuffers中selected video track, the enabled audio track(s), and the "showing" or "hidden" text track(s)的一个子集。

readyState 类型:ReadyState,只读
MediaSource对象的当前状态,刚创建的时候一定是‘closed’。

duration 类型:unrestricted double
MediaSource刚创建的时候,初始化值为NaN。
如何获取?

  1. 如果readyState为closed,则返回NaN,这一步可以丢弃
  2. 返回该属性当前值
    如何设置?
  3. 如果设置了负值或者NaN,会抛出TypeError异常,并丢弃剩余步骤
  4. 如果readyState不是open,会抛出InvalidStateError异常,并丢弃剩余步骤
  5. sourceBuffers属性中的任何一个SourceBuffer的updating值为true, ,会抛出InvalidStateError异常,并丢弃剩余步骤
  6. 运行duration change algorithm算法可以设置新的duration给当前属性

Note
如果当前有更高end time的缓冲帧,duration change algorithm会调整新的更大的duration。
appendBuffer()和 endOfStream()方法会更新duration在特定的情况下。

onsourceopen 类型:EventHandler
sourceopen事件的处理回调

onsourceended 类型:EventHandler
sourceended事件的处理回调

onsourceclose 类型:EventHandler
sourceclose事件的处理回调

2.2 方法

addSourceBuffer
入参:type, 返回SourceBuffer对象,调用如:

sourceBuffer = ms.addSourceBuffer('video/mp4; codecs="avc1.4d401f"');

添加一个新的SourceBuffer对象到sourceBuffers属性,接下来ua需要执行:

  1. 如果type为空字符串(''),则抛出TypeError异常,并丢弃剩余步骤
  2. 如果type为不支持的MIME类型,则抛出 NotSupportedError异常,并丢弃剩余步骤
  3. 如果ua不能处理更多的SourceBuffer内容,则抛出QuotaExceededError异常,并丢弃剩余步骤

比如当媒体元素到了HAVE_METADATA状态的时候,ua就不支持播放中更多track的添加了

  1. 如果readyState不是open,则抛出InvalidStateError异常,并丢弃剩余步骤
  2. 常见一个新的SourceBuffer对象和相关资源
  3. 设置新对象的generate timestamps flag为相关类型的[MSE-REGISTRY] entry
  4. 如果generate timestamps flag值为true,设置新对象的mode属性为“sequence”,否则设置为“segments”
  5. 把新对象添加到sourceBuffers中,并且触发一个addsourcebuffer事件
  6. 返回这个新对象

removeSourceBuffer

endOfStream
入参:error(EndOfStreamError),无返回值

  • setLiveSeekableRange*
    更新 HTMLMediaElement Extensions元素的live seekable range变量
  • clearLiveSeekableRange*
  • isTypeSupported* static
    检测MediaSource对象是否支持创建特定MIME类型的SourceBuffer

只代表浏览器是否支持的能力,不代表addSourceBuffer()方法有足够的资源创建新的SourceBuffer

2.3 事件

事件名称 描述
sourceopen readyState 从close到open 或 从ended到open
sourceended readyState 从open到ended
sourceclose readyState 从open到closed 或 从open到ended

2.4 算法(待补充)


九瑶
139 声望26 粉丝

前阿里前端,在淘宝直播、鹿班短视频、iTAG智能AI标注平台打过杂。