快速了解 H5 播放器

Web视频播放演进

FLASH时代

在 HTML5 MediaElement 元素出来之前，在web端播放媒体文件都需要第三方插件的支持，  浏览器本身并不能够直接播放媒体文件。但是浏览器并没有向Flash屈服，很快HTML5 媒体元素出现占领了Flash的一片天地

HTML5 时代                 

HTML5提供了媒体播放元素，可以直接在浏览器中播放视频。并且各大浏览器对此支持度都很好，很快在浏览器上播放视频使用Flash插件越来越少。 video标签，audio标签，可以实现简单的视音频播放，支持.mp4，.ogg， .webm媒体文件格式，最常用的还是mp4格式。尽管这种方式给浏览器端带来了很多便利，但是对视频的更细准的播放控制确不能，不能灵活地控制流播放，不支持DRM加密，也不能支持web端实时看直播的模式，随着直播领域的火热，浏览器哪能停止这一点满足，于是MSE诞生， 媒体扩展源的被各大浏览器快速支持，让PC端也加入了直播领域中。

媒体源扩展

Media Source Extension   扩展web应用的视频播放功能，解决HTML5原生标签播放的局限，可以使用js控制，将字节流发送给浏览器媒体解码器进行播放。可以实时观看直播，可以不局限只播.mp4文件，可以播hls文件。MSE的诞生成就了flv.js播放器， hls.js播放器，video.js的等优秀的开源播放器。目前常用的播放文件格式.mp4，.m3u8(ts), .flv safaris可以直接支持video播放m3u8文件，但其它浏览器就需要拿到视频流转换为.mp4，然后喂给video标签进行播放。而这一切都源于mse的支持。

• MSE播放 mp4文件基本流程

let video = document.getElementById('video'); // 创建video标签

const assetURL = 'xxxx.mp4';

const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {

const mediaSource = new MediaSource(); // 创建MediaSource对象

video.src = URL.createObjectURL(mediaSource); // 创建Blob对象

mediaSource.addEventListener('sourceopen', sourceOpen); // mediaSource与媒体元素关联上，触发事件

} else {

console.error('Unsupported MIME type or codec: ', mimeCodec);

}

//

function sourceOpen (e) {

var mediaSource = this;

let sourceBuffer = mediaSource.addSourceBuffer(mimeCodec); //创建sourceBuffer

fetchAB(assetURL, (buf) => { // 获取mp4文件媒体数据

sourceBuffer.addEventListener('updateend', () => {

mediaSource.endOfStream(); // 媒体数据读完

video.play();

});

sourceBuffer.appendBuffer(buf); //媒体数据追击到sourceBuffer中

});

};

// 获取cdn的流

function fetchAB (url, cb) {

var xhr = new XMLHttpRequest;

xhr.open('get', url);

xhr.responseType = 'arraybuffer';

xhr.onload = function () {

cb(xhr.response);

};

xhr.send();

};

• MSE播放ts媒体文件基本流程

播放ts(MPEG2-TS)文件是浏览器video原生标签不支持的，首先需要将解析ts文件并将其转换为mp4文件格式，供浏览器播放。后续流程与MP4处理流程一致

详细了解MSE的使用，请戳这里  https://www.yuque.com/xiyin/shipin/hgz7g0

Encrypted Media Extensions

Encrypted Media Extensions 随着视频行业的快速发展,视频内容的版权保护越来越受到越来越多的版权方关注，怎么样可以避免视频被盗？ 怎么样可以保护原创的作品?

DRM( Digital Rights Management ) 数字版权管理方案给要受保护的数字内容提供了一种安全机制 ----它是 通过对数字内容进行加密和附件了使用规则，对数字内容进行保护。 各大浏览器对其播放安全的支持提供了不同的保护机制模式：谷歌系列的widevine、苹果系列的fairPlay、微软系列playReady。而这些保护机制都是在浏览器内核中，H5提供的媒体播放接口是不能调用这些保护机制来对播放视频进行保护的，

因此就诞生了 加密媒体扩展源 EME， 加密媒体源扩展，它给浏览器端播放加密视频提供了可能，它在 web 浏览器和 DRM 代理软件之间提供通信， 可以让网页浏览器播放受保护的内容成为现实。

在浏览器中要解密加密媒体文件还需要浏览器支持 CDM content decryption module  内容加密模块，允许播放加密媒体的客户端软件或硬件机制， 它的工作是： 可以处理媒体的解码和解密， 有多种方式为 web 应用程序提供 CDM:

1. 浏览器集成 CDM

2. 单独发布 CDM

3. 操作系统集成 CDM

4. 在固件中包含 CDM

5. 硬件支持 CDM

EME规范为CDM定义了5个可靠等级 

有了上面的基础，下面就可以看下EME实现播放加密媒体文件的流程，以及具体在不同浏览器上widevide和fairplay的实现机制

EME的基本工作流程

• 触发加密事件 ：H5播放器获取到视频流信息， 浏览器从视频文件的元数据信息中，识别出媒体是加密的，触发 encryed 事件

• 访问DRM系统(keySystem):   根据当前浏览器判断对应的DRM保护机制是否可用，Navigator.requestMediaKeySystemAccess(‘xxx’，xxx)访问指定的 key System， 返回MediaKeySystemAccess对象

• 创建密钥(Media keys):    获得了可访问的key system系统对象，并创建用于播放期间解密媒体数据的密钥keys，  MediaKeySystemAccsee.createMediaKeys()创建Media keys

• 关联密钥与媒体元素 ： 将创建的解密媒体密钥mediaKeys与播放加密视频的媒体元素<video>元素关联，MediaElement.setMediaKeys (mediaKeys)

• 创建消息上下文 ：   创建与CDM信息交换的上下文  MediaKeys.createSession ()

• CDM生成请求： 监听message事件，将媒体数据传递给CDM生成请求                           MediaKeysSession.generateRequest ()  

• 请求服务端证书和解密key： CDM触发message 事件， 从证书服务器获取密钥的请求，应用程序向服务器发送请求，获取 key

• 更新session:  获取到服务端返回的key信息，MediaKeysSession.update (key)，更新获取到的 key 到 CDM 中

• 解密视频 ：CDM解密视频

• 播放视频： 媒体元素播放视频

EME具体使用可以参考：https://www.yuque.com/xiyin/shipin/halsvp

widevine的实现机制

widevine的实现机制（目前chrome浏览器， 火狐浏览器， 360极速浏览器高版本都支持widevine保护机制） chrome对EME的支持度很好，基本EME的流程，就是widevine保护机制的实现流程

（1）点击视频播放

（2）请求受widevine保护机制加密的内容时，会触发事件 encryed， 事件监听器收到encryed消息事件， 会用字符串'com.widevine.alpha'查找对应的cdm系统，并创建mediaKeys，与媒体元素关联

(3)  创建keySession，并监听message事件，发送视频内容到CDM生成请求

（4）CDM触发message事件

（5）应用程序向license服务器发出证书请求

（6）用 收到的key 更新session内容

（7）CDM解密媒体，应用播放加密媒体

fairpaly的实现机制（safaris浏览器）

safaris对EME的支持有自己的一套API，https://developer.apple.com/documentation/webkitjs/webkitmediakeys 与标准的EME用法有些差异，但基本的流程思路是相通的

（ 1 ）点击视频播放

（ 2 ）当请求播放受fps保护的内容时，会触发事件webkitneedkey，事件监听器收到’ webkitneedkey ‘消息， webkitneedkey事件查找用字符串com.apple.fps.1_0标识的cdm，并允许创建keysession

（ 3 ）事件监听器创建 keySession，  并监听’ webkitkeymessage ‘事件，kession.webkitkeymessage

（ 4 ）“ webkitkeymessage ”事件处理程序会收到 SPC和contentID组成 的消息

（ 5 ）发送 SPC 给 Key Server

( 6 ) 用收到的 CKC 响应 更新 session

（7）CDM解密媒体，应用播放加密媒体

说了这么多，他家肯定想知道播放器的播放流程到底是什么呢，请看下面

视频播放器流程

1. 拉取数据 ：就是从cdn地址拉取将要播放的视频文件

2. 解封装：音视频数据在生产后，会包被打包到一个容器内，传送，因此到端上首先会将其demux，

3. 音视频解码：视频在生产时为了传输以及播放流畅等原因，会在最开始对音视频进行压缩，（利用视频的空间冗余，时间冗余，编码冗余等信息对视频进行压缩），因此在端上收到音视频数据，对应的要对数据进行解码（解压缩）

4. 采样/像素数据发送到设备进行渲染：

借图( https://www.jackpu.com/webduan-h-265bo-fang-qi-yan-fa-jie-mi/  )可以清楚了解播放器的基本播放流程：

总结

以上就是简单的对自己这段时间的学习了解到视频相关的知识简单的梳理，希望对大家有帮助。

微信公众号 : 

溜溜技术

简介: 

来自各大移动互联网服务端 程序员 的思想碰撞平台 。技术、逻辑、思辩、进步、创新。有没有干货，拉出来溜溜！

投稿联系 : 

oscersong007

长按二维码, 发现惊喜