使用媒体源 API 平滑表示更改

Question

我目前正在使用 JavaScript 和 MediaSource API

开发 DASH 播放器

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

不过，我想知道是否有一种简单的方法可以使用媒体源 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 规范并没有说明平滑变化的表示。学习如何做的方法是阅读现有的 dash 播放器的代码，看看它是如何做的。为了节省您大量时间，以下是操作方法：

首先你只需要一个源缓冲区。不同表示的编解码器不同并不重要。您创建一个源缓冲区并将其用于播放器的整个生命周期。切换表示次数多少次都没有关系。
切换表示的方法其实很简单。您只需将目标表示的初始化 header 附加到源缓冲区。就是这样。之后解码器被重新初始化，您可以开始附加属于新表示的片段。
附加目标表示的片段并享受平滑过渡。

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

使用媒体源 API 平滑表示更改

Smooth representation change using Media Source API

javascript

media-source

mpeg-dash