Media Source Extensions API

Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

媒体源扩展 API(MSE) 提供了实现无插件且基于 Web 的流媒体的功能。使用 MSE,媒体串流能够通过 JavaScript 创建,并且能通过使用 <audio><video> 元素进行播放。

概念和用法

近几年来,我们已经可以在 Web 应用程序上无插件地播放视频和音频了。但是,现有架构过于简单,只能满足一次播放整个曲目的需要,无法实现拆分/合并数个缓冲文件。流媒体直到现在还在使用 Flash 进行服务,以及通过 RTMP 协议进行视频串流的 Flash 媒体服务器。

MSE 标准

媒体源扩展(MSE)实现后,情况就不一样了。MSE 使我们可以把通常的单个媒体文件的 src 值替换成引用 MediaSource 对象(一个包含即将播放的媒体文件的准备状态等信息的容器),以及引用多个 SourceBuffer 对象(代表多个组成整个串流的不同媒体块)的元素。MSE 让我们能够根据内容获取的大小和频率,或是内存占用详情(例如什么时候缓存被回收),进行更加精准地控制。 它是基于它可扩展的 API 建立自适应比特率流客户端(例如DASH 或 HLS 的客户端)的基础。

在现代浏览器中创造能兼容 MSE 的媒体(assets)非常费时费力,还要消耗大量计算机资源和能源。此外,还须使用外部实用程序将内容转换成合适的格式。虽然浏览器支持兼容 MSE 的各种媒体容器,但采用 H.264 视频编码、AAC 音频编码和 MP4 容器的格式是非常常见的,且一定兼容。MSE 同时还提供了一个 API,用于运行时检测容器和编解码是否受支持。

如果没有精确的控制时间、媒体质量和内存释放等需求,使用 <video><source> 是一个更加简单但够用的方案。

DASH

DASH(Dynamic Adaptive Streaming over HTTP )是一个规范了自适应内容应当如何被获取的协议。它实际上是建立在 MSE 顶部的一个层,用来构建自适应比特率串流客户端。虽然已经有一个类似的协议了(例如 HTTP 串流直播(HLS)),但 DASH 有最好的跨平台兼容性,这就是我们在这里介绍它的原因。

DASH 将大量逻辑从网络协议中移出到客户端应用程序逻辑中,使用更简单的 HTTP 协议获取文件。 这样就可以用一个简单的静态文件服务器来支持 DASH,这对CDN也很友好。这与之前的流传输解决方案形成鲜明对比,那些流解决方案需要昂贵的许可证来获得非标准的客户端/服务器协议才能实现。

DASH 的两个最常见的用例涉及“点播”或“直播”观看内容。点播功能让开发者有时间把媒体文件转码出多种不同的分辨率质量。

实时处理内容会引入由转码和播发带来的延迟。因此 DASH 并不适用于类似 WebRTC 的即时通讯。但它可以支持比 WebRTC 更多的客户端连接。

有非常多的自由开源的工具,能实现转码内容,并将其改造,以适应 DASH、DASH 文件服务器和用 JavaScript 编写的 DASH 客户端库。

媒体源扩展接口

MediaSource
代表了将由 HTMLMediaElement 对象播放的媒体资源。
SourceBuffer
代表了一个经由 MediaSource 对象被传入 HTMLMediaElement 的媒体块。
SourceBufferList (en-US)
列出多个 SourceBuffer 对象的简单的容器列表。
VideoPlaybackQuality
包含了有关正被 <video> 元素播放的视频的质量信息,例如被丢弃或损坏的帧的数量。由 HTMLVideoElement.getVideoPlaybackQuality() (en-US) 方法返回。
TrackDefault
为在媒体块的初始化段(initialization segments)中没有包含类型、标签和语言信息的轨道,提供一个包含这些信息的 SourceBuffer
TrackDefaultList
列出多个 TrackDefault 对象的简单的容器列表。

其他接口的扩展

URL.createObjectURL()
创建一个指向一个 MediaSource 对象的 URL。要求此 URL 可以被指定为一个用来播放媒体流的 HTML 媒体元素的 src 的值。
HTMLMediaElement.seekable
当一个 MediaSource 对象被 HTML 媒体元素播放时,此属性将返回一个包含用户能够在什么时间范围内进行调整的对象 TimeRanges
HTMLVideoElement.getVideoPlaybackQuality() (en-US)
针对正在播放的视频,返回一个 VideoPlaybackQuality 对象。
AudioTrack.sourceBuffer (en-US), VideoTrack.sourceBuffer (en-US), TextTrack.sourceBuffer
返回创建了相关轨道的 SourceBuffer

规范

规范 状态 附注
Media Source Extensions Recommendation 初始定义。

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)
功能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本支持 23 25.0 (25.0)[1]
42.0 (42.0)
11[2] 15 8
功能 Android Firefox Mobile (Gecko) Firefox OS (Gecko) IE Phone Opera Mobile Safari Mobile
基本支持 4.4.4

未实现

未实现 11 30 未实现

[1] 在将 about:config 中的首选项 media.mediasource.enabled 切换到 true 后才可支持。此外,这一版本的 Firefox 仅支持白名单内的网站,例如 YouTube、Netflix 以及其他流行的流媒体网站。此白名单在 Firefox 42+ 被移除,媒体源扩展默认被启用,且支持所有网站。

[2] 只针对 Windows 8+。

参见