[html5]视频流的容器SourceBuffer

SourceBuffer

SourceBuffer 是由 mediaSource 创建，并直接和 HTMLMediaElement 接触。简单来说，它就是一个流的容器，里面提供的 append() ， remove() 来进行流的操作，它可以包含一个或者多个 media segments 。同样，接下来，我们再来看一下该构造函数上的基本属性和内容。

基础内容

前面说过 sourceBuffer 主要是一个用来存放流的容器，那么，它是怎么存放的，它存放的内容是啥，有没有顺序等等。这些都是 sourceBuffer 最最根本的问题。OK，接下来，我们来看一下的它的基本架构有些啥。

参考 W3C ，可以基本了解到里面的内容为：

interface SourceBuffer : EventTarget {              attribute AppendMode          mode;     readonly attribute boolean             updating;     readonly attribute TimeRanges          buffered;              attribute double              timestampOffset;     readonly attribute AudioTrackList      audioTracks;     readonly attribute VideoTrackList      videoTracks;     readonly attribute TextTrackList       textTracks;              attribute double              appendWindowStart;              attribute unrestricted double appendWindowEnd;              attribute EventHandler        onupdatestart;              attribute EventHandler        onupdate;              attribute EventHandler        onupdateend;              attribute EventHandler        onerror;              attribute EventHandler        onabort;     void appendBuffer(BufferSource data);     void abort();     void remove(double start, unrestricted double end); };

上面这些属性决定了其 sourceBuffer 整个基础。

首先是 mode 。上面说过，SB(SourceBuffer) 里面存储的是 media segments（就是你每次通过 append 添加进去的流片段）。SB.mode 有两种格式：

• segments: 乱序排放。通过 timestamps 来标识其具体播放的顺序。比如：20s的 buffer，30s 的 buffer 等。
• sequence: 按序排放。通过 appendBuffer 的顺序来决定每个 mode 添加的顺序。 timestamps 根据 sequence 自动产生。