媒体源 API

几年来，在 Web 应用程序中播放视频和音频已经无需插件，但提供的基本功能实际上只对播放单个完整曲目有用。例如，我们无法组合/拆分数组缓冲区。流媒体一直是 Flash 的领域，直到最近，Flash Media Server 使用 RTMP 协议提供视频流的 Flash 技术。

随着媒体源扩展 (MSE) 的出现，这种情况正在改变。MSE 允许我们用对 MediaSource 对象的引用替换通常提供给媒体元素的单个渐进式 src URI，MediaSource 对象是包含媒体就绪状态（用于播放）的信息以及对多个 SourceBuffer 对象的引用的容器，这些对象代表构成整个流的不同媒体块。MSE 使我们能够对内容的获取量和获取频率进行更细粒度的控制，并对内存使用细节（例如缓冲区何时被清除）进行一些控制。它为基于其可扩展 API 构建自适应码率流客户端（例如使用 DASH 或 HLS 的客户端）奠定了基础。

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

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

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

DASH 将大量逻辑从网络协议转移到客户端应用程序逻辑，使用更简单的 HTTP 协议来获取文件。实际上，可以使用简单的静态文件服务器支持 DASH，这对 CDN 来说也是很不错的选择。这与之前的流媒体解决方案形成鲜明对比，之前的流媒体解决方案需要为专有的非标准客户端/服务器协议实现支付高昂的许可费用。

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

直播内容由于其转码和广播可能会导致延迟，因此 DASH 不适用于像 WebRTC 这样的实时通信。但是，它可以支持比 WebRTC 更多的客户端连接。

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

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

请参阅 Matt Wolenetz 的 MSE-in-Workers 演示，了解一个实时示例。

MediaSource

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

SourceBuffer

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

SourceBufferList

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

VideoPlaybackQuality

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

URL.createObjectURL()

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

HTMLMediaElement.seekable

当 HTML 媒体元素播放 MediaSource 对象时，此属性将返回一个 TimeRanges 对象，该对象包含用户可以跳转到的时间范围。

HTMLVideoElement.getVideoPlaybackQuality()

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

AudioTrack.sourceBuffer、VideoTrack.sourceBuffer、TextTrack.sourceBuffer

返回创建了相关轨道的 SourceBuffer。

• 为媒体源扩展转码资产
• 使用 MSE 创建基本流媒体服务（待定）
• 使用 MPEG DASH 创建流媒体应用程序（待定）
• <audio> 和 <video> 元素。
• HTMLMediaElement、HTMLVideoElement、HTMLAudioElement。