Media Source API - 提供支持基于 Web 的无插件流媒体的功能

Media Source API，正式名称为 Media Source Extensions (MSE)，提供支持基于 Web 的无插件流媒体的功能。使用 MSE，媒体流可以通过 JavaScript 创建，并使用 <audio> 和 <video> 元素播放。

媒体源扩展的概念和用法

近几年来，在没有插件的情况下，网络应用已经可以播放视频和音频，但所提供的基本功能实际上只适用于播放单一的完整曲目。例如，我们不能合并/拆分数组缓冲区。直到最近，流媒体一直是 Flash 的领域，像 Flash 媒体服务器这样的技术使用 RTMP 协议提供视频流。

MSE 标准

有了媒体源扩展（MSE），这种情况正在改变。MSE 允许我们用对 MediaSource 对象的引用来取代通常的单轨 src 值，MediaSource 对象是一个信息容器，如媒体的准备状态，以及对多个 SourceBuffer 对象的引用，这些对象代表了构成整个流的不同媒体块。MSE 为我们提供了对内容获取的数量和频率的更精细的控制，以及对内存使用细节的一些控制，如缓冲区何时被清理。它为自适应比特率流媒体客户端（如那些使用 DASH 或 HLS 的客户端）建立在其可扩展的 API 上奠定了基础。

在现代浏览器中创建与 MSE 配合使用的资源是一个费力的过程，需要花费大量的时间、计算能力和精力。需要使用外部实用程序将内容转换为合适的格式。虽然浏览器对带有 MSE 的各种媒体容器的支持参差不齐，但 H.264 视频编解码器、AAC 音频编解码器和 MP4 容器格式的使用是一个共同的基准。MSE 还提供了一个 API 用于运行时检测容器和编解码器的支持。

如果您不需要显式控制随时间推移的视频质量、获取内容的速率或清理内存的速率，那么 <video> 和 <source> 标签可能是一个简单而充分的解决方案。

DASH

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

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

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

实时配置文件内容由于其转码和广播会带来延迟，因此 DASH 不适合像 WebRTC 那样的实时通信。然而，它可以支持比 WebRTC 多得多的客户端连接。

有许多可用的免费和开源工具可用于对内容进行转码，并将其准备用于 DASH、DASH 文件服务器和用 JavaScript 编写的 DASH 客户端库。

接口

MediaSource

表示要通过 HTMLMediaElement 对象播放的媒体源。

SourceBuffer

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

SourceBufferList

多个 SourceBuffer 对象的简单容器列表。

VideoPlaybackQuality

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

TrackDefault

为 SourceBuffer 提供种类、标签和语言信息，用于在媒体块的初始化段中不包含此信息的轨道。

TrackDefaultList

多个 TrackDefault 对象的简单容器列表。

其他接口的扩展

URL.createObjectURL()

创建一个指向 MediaSource 对象的对象 URL，然后可以将其指定为 HTML 媒体元素的 src 值以播放媒体流。

HTMLMediaElement.seekable

当 HTML 媒体元素播放 MediaSource 对象时，此属性将返回一个 TimeRanges 对象，其中包含用户能够搜索的时间范围。

HTMLVideoElement.getVideoPlaybackQuality()

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

AudioTrack.sourceBuffer，VideoTrack.sourceBuffer，TextTrack.sourceBuffer

返回创建相关轨道的 SourceBuffer。

规范

规范	状态	备注
Media Source Extensions	推荐	初始定义。

MediaSource 接口

桌面浏览器兼容性

移动浏览器兼容性

1. 对允许的网站列表的有限支持，例如 YouTube、Netflix 和其他流行的流媒体网站。在 Firefox 42 中默认启用媒体源扩展时，该限制被删除。