Media Source API

概念与用法

几年来，网页应用程序一直可以在没有插件的情况下播放视频和音频，但其提供的基本功能仅限于播放单个完整的音轨。例如，我们无法合并/拆分 arraybuffers。直到最近，流媒体一直由 Flash 主导，像 Flash Media Server 这样的技术使用 RTMP 协议传输视频流。

MSE 标准

随着 Media Source Extensions (MSE) 的出现，这种情况正在改变。MSE 允许我们将通常提供给媒体元素的单个渐进式 src URI 替换为对 MediaSource 对象的引用。MediaSource 对象是一个容器，包含有关媒体是否可播放的就绪状态等信息，以及对构成整个流的各种媒体块的多个 SourceBuffer 对象的引用。MSE 让我们能够更精细地控制内容的获取量和获取频率，以及内存使用情况，例如何时需要清除缓冲区。它为构建基于其可扩展 API 的自适应比特率流式传输客户端（例如使用 DASH 或 HLS 的客户端）奠定了基础。

在现代浏览器中创建与 MSE 兼容的资源是一个耗时的过程，需要大量的计算能力和精力。需要使用外部实用工具将内容整理成合适的格式。虽然浏览器对 MSE 的各种媒体容器的支持参差不齐，但 H.264 视频编解码器、AAC 音频编解码器和 MP4 容器格式的用法是一个常见的基准。MSE 还提供了一个 API，用于在运行时检测容器和编解码器的支持情况。

如果您不需要对视频质量随时间的变化、内容获取速率或内存清除速率进行显式控制，那么 <video> 和 <source> 标签可能是一个简单且足够的解决方案。

DASH

Dynamic Adaptive Streaming over HTTP (DASH) 是一种用于指定如何获取自适应内容的协议。它实际上是构建自适应比特率流式传输客户端的 MSE 之上的一个层。虽然还有其他协议可用（例如 HTTP Live Streaming (HLS)），但 DASH 在平台支持方面最为广泛。

DASH 将大量逻辑从网络协议移到了客户端应用程序逻辑中，使用更简单的 HTTP 协议来获取文件。事实上，可以使用一个简单的静态文件服务器来支持 DASH，这对于 CDN 也非常有利。这与以前需要为专有的非标准客户端/服务器协议实现昂贵许可证的流媒体解决方案形成了鲜明对比。

DASH 的两个最常见用例是观看“点播”或“直播”内容。点播允许开发人员花时间将资源转码成多种分辨率和质量。

直播内容由于其转码和广播过程可能会引入延迟，因此 DASH 不适用于实时通信，例如 WebRTC。但是，它可以支持比 WebRTC 多得多的客户端连接。

有许多可用的免费开源工具可用于转码内容、为 DASH 准备内容、DASH 文件服务器以及用 JavaScript 编写的 DASH 客户端库。DASH Adaptive Streaming for HTML video 文章提供了一个如何将 DASH 与 MSE 结合使用的示例。

在 Worker 中可用

从 Chrome 108 开始，MSE 功能在专用的 web workers 中可用，这使得在操作 MediaSource 和 SourceBuffer 时可以获得更高的性能。要回放媒体，使用 MediaSource.handle 属性来获取 MediaSourceHandle 对象的引用，该对象是 MediaSource 的代理，可以将其传回主线程并通过媒体元素的 HTMLMediaElement.srcObject 属性进行附加。

请参阅 Matt Wolenetz 的 MSE-in-Workers Demo 以获取一个实时示例。

接口

MediaSource

表示一个将通过 HTMLMediaElement 对象播放的媒体源。

MediaSourceHandle

一个 MediaSource 的代理，可以从专用 Worker 传回主线程，并通过媒体元素的 HTMLMediaElement.srcObject 属性进行附加。

SourceBuffer

表示要通过 MediaSource 对象传递到 HTMLMediaElement 的媒体块。

SourceBufferList

一个简单的容器列表，用于存放多个 SourceBuffer 对象。

VideoPlaybackQuality

包含有关 <video> 元素正在播放的视频质量的信息，例如丢帧或损坏帧的数量。由 HTMLVideoElement.getVideoPlaybackQuality() 方法返回。

其他接口的扩展

HTMLMediaElement.buffered

返回一个 TimeRanges 对象，该对象指示浏览器在访问 buffered 属性时已缓冲的媒体源范围（如果有）。

HTMLMediaElement.seekable

返回一个 TimeRanges 对象，该对象包含用户可以跳转到的时间范围（如果有）。

HTMLMediaElement.srcObject

表示将在当前 HTMLMediaElement 中播放的媒体资源或已播放的媒体资源的提供者对象，如果未分配则为 null。

HTMLVideoElement.getVideoPlaybackQuality()

返回当前播放视频的 VideoPlaybackQuality 对象。

AudioTrack.sourceBuffer, VideoTrack.sourceBuffer, TextTrack.sourceBuffer

返回创建该轨道（相关轨道）的 SourceBuffer。

规范

另见

• 转码 Media Source Extensions™ 资源
• 使用 MSE 创建一个基本的流媒体服务（待定）
• 使用 MPEG DASH 创建一个流媒体应用程序（待定）
• <audio> 和 <video> 元素。
• HTMLMediaElement, HTMLVideoElement, HTMLAudioElement。