使用 Media Source API 平滑表示更改

Question

我目前正在使用 JavaScript 和 MediaSource API 开发 DASH 播放器

流媒体工作正常，但我一直在更改表示形式。在播放期间更改表示的最暴力的方法可能是替换 HTML 文档中的 元素。

但是，我想知道是否有一种简单的方法可以使用 Media Source API 实现适应（更改表示）。我读过单个 Media Source 对象可以处理许多源缓冲区，但是在添加第二个视频缓冲区后会引发异常。

我正在使用 Chrome 43.0.2357.65m

var mediaSource = MediaSource();
var url = URL.createObjectURL(mediaSource);

videoElement.src = url;

mediaSource.addEventListener('sourceopen', function () {
    var buffer1 = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.4d4015"');
    var buffer2 = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.4d4015"');
}

例外：

Uncaught QuotaExceededError: Failed to execute 'addSourceBuffer' on    'MediaSource': This MediaSource has reached the limit of SourceBuffer objects it can handle. No additional SourceBuffer objects may be added.

Answer 1

不幸的是，MSE 规范并没有对平滑更改表示进行太多说明。学习如何做到这一点的方法是阅读现有破折号播放器的代码，看看它是如何做到的。为了节省您的大量时间，这里是如何做到这一点：

1. 首先，您只需要一个源缓冲区。不同表示的编解码器不同并不重要。您创建一个源缓冲区并在播放器的整个生命周期中使用它。切换表示多少次都没关系。

2. 切换表示的方式其实很简单。您只需要将目标表示的初始化标头附加到源缓冲区。就是这样。之后，解码器已重新初始化，您可以开始附加属于新表示的段。

3. 附加目标表示的片段并享受平滑过渡。

就是这样。一旦你弄清楚你必须做什么，这并不难。