最全MSE(Media Source Extensions)介绍，2024年最新史上最通俗计算机网络分层详解

最新推荐文章于 2024-07-22 10:29:37 发布

2401_84978503

最新推荐文章于 2024-07-22 10:29:37 发布

阅读量885

点赞数 18

文章标签： c语言 c++ 学习

本文链接：https://blog.csdn.net/2401_84978503/article/details/138940885

版权

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

1 概述

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

2 why MSE

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

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

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