媒体源扩展（MSE）介绍

本文主要介绍MSE（Media Source Extensions，媒体源扩展）的相关知识。

1 概述

MSE，即媒体源扩展，可以理解为一种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播放器播放。