MSE(Media Source Extensions)介绍

电玩女神 2022-11-17 05:11 137阅读 0赞

本文介绍 MSE(Media Source Extensions) 的相关知识。

# 1 概述 #

MSE(Media Source Extensions)，即媒体源扩展，可以理解为一种API，其提供了实现无插件且基于 Web 的流媒体的功能。通过 MSE，媒体串流能够通过 JavaScript 创建，并且可以使用 HTML5 的 <audio> 和 <video> 标签进行播放。

# 2 why MSE #

以前，用户在通过Web浏览器浏览网页内容，尤其是视频内容时，需要使用诸如 Adobe Flash 或是微软的 Silverlight 等类似的插件，才能播放视音频内容，这些插件对于Web浏览器来说，扮演着媒体播放器角色。但是，在浏览器中使用插件是不便捷并且不安全的（不法分子会在插件上动手脚），因此，最新的HTML5标准中，定义了一系列新的元素来避免使用插件，其中就包含了大名鼎鼎的 <video> 标签。

有了 <video> 标签，支持 HTML5 的Web浏览器就能够实现无需插件播放媒体内容了，但是 HTML5 的 <video> 标签对媒体的格式有所限制（在 Windows 电脑上只支持 mp4、webm、ogg 等格式）。这里简单介绍一下媒体格式，媒体的格式分为“编码格式”和“封装格式”，原视频数据通过编码来压缩视频数据大小，这里用到的格式为编码格式（如常见的H.264编码），再通过封装将压缩后的视音频、字幕组合到一个容器中，这里用到的格式为封装格式（如常见的mp4格式）。

我们可以把 <video> 标签看做是浏览器自带的、具有解封和解码功能的视频播放器。但是，随着视频点播、直播等视频业务的兴起，视频数据会通过流媒体传输协议（目前常用的 MPEG-DASH 和 Apple 的 HLS）从服务端分发给客户端，在这种情况下，媒体内容就被包含在传输协议中了，此时 HTML5 的 <video> 标签就无法识别并播放媒体内容了。以 HLS 协议为例。HLS 将视频源文件的内容分散地封装到一个个TS文件中，此时仅靠 <video> 标签是无法识别这些TS文件的，所以，我们就需要引入了 MSE 来帮助Web浏览器识别并处理TS文件，将其变回Web浏览器可识别的媒体容器格式（mp4格式），经过 MSE 的处理，<video> 标签就可以识别并播放视频源文件了。例如，hls.js 中就利用 MSE 将视频分片内容进行合流，并组成 HTML5 的 <video> 标签可播放的媒体资源文件。再比如，flv.js 通过 MSE 播放 HTTP-FLV 协议的视频直播流。简单总结一下，引入 MSE 之后，支持 HTML5 的Web浏览器就变成了能够解析流协议的播放器了。

从另外一个角度来说，通过引入 MSE，HTML5 的 <video> 标签不仅可以直接播放其默认支持的 mp4、m3u8、webm、ogg 等格式，还可以支持能够被 （具备MSE功能的）JS 处理的视频流格式。如此一来，我们就可以通过 （具备MSE功能的）JS，把一些 <video> 标签原本不支持的视频流格式，转化为其支持的格式（如 H.264 的 mp4）。B站开源的 flv.js 就是此技术的一个典型应用场景，B站的HTML5播放器，通过使用 MSE 技术，将FLV源用 JS（flv.js） 实时转码成 HTML5 支持的视频流编码格式，提供给 HTML5 播放器播放。