最完整的Web视频加密播放技术实现(含技术调研和Demo源码)

大厂技术  高级前端  Node进阶

点击上方 程序员成长指北，关注公众号
回复1，加入高级Node交流群

作者：然燃 （感谢小伙伴投稿分享）
原文链接: http://juejin.cn/post/7307934456995856419

最近又遇到了web视频化的场景，之前也有过调研：H5视频化调研浅析1

但这次稍微复杂一些，这次解决的是：

1. 视频播放的技术方案调研

服务端实现：

1. 视频转码

2. 生成不同码率的视频

3. 进行视频标准加密

4. 不同码率视频合并，用于动态码率播放

web端实现

1. web端播放器的设计

2. web端播放器的自定义扩展

3. 可拖拽进度条

4. 音量控制

5. 根据当前带宽自适应码率切换

6. 手动清晰度切换

7. 倍速播放

8. 样式自定义覆盖

9. 标准加密视频播放

10. 基于原生开发，可在所有框架运行，统一跨框架情况

11. 各浏览器控件统一

其中web端源码已添加MIT协议并完全开源，如果看完对大家有帮助的话，欢迎大家star,issue,pr，也希望能友好交流～

demo地址：⇲http://chaxus.github.io/ran/src/ranui/player/

源码地址：⇲http://github.com/chaxus/ran/tree/main/packages/ranui

demo文档做了国际化，可切换到中文

任何一个项目，立项肯定先是技术调研，我们先看看一些大公司的视频播放方案

#一.一些知名公司的web视频播放方案

#1.B站

我们先看看B站的，毕竟B站的主营业务就是视频弹幕网站，简直专业对口。

先找一个例子：⇲www.bilibili.com/video/BV1FM…^⇲2 访问它。

打开控制台，可以看到，视频在播放的时候，会不断的请求m4s的视频文件。

毕竟一整个视频文件往往比较大，不可能先请求完视频文件，再进行播放。因此将一个大的视频文件分割成很多小的片段，边加载边播放，是一种更好的方式。

每次请求的m4s文件大概在几十kb到几百kb不等。

那为什么不采用http的range呢，可以请求一个文件的部分内容，而且粒度更细，可以设置字节范围。在http请求的header中，类似这样

Range: bytes=3171375-3203867

我们可以检查这个链接请求http://upos-sz-mirror08c.bilivideo.com/upgcxcode/67/92/1008149267/1008149267-1-30064.m4s的请求头，就能发现，B站采用的是，即分片加载，同时还用了range的方式。

#2. 爱奇艺：（爱奇艺、土豆、优酷）

爱奇艺这里就不贴视频链接了，因为随便点一个视频，都要先看广告。

爱奇艺的视频主要请求的是f4v格式，也是分片加载。

播放一个视频时，请求多个f4v文件。

也采用Range。但和B站不一样的是，B站的Range属性是在m4s请求的请求头里面，而爱奇艺的看起来是在querystring上，在请求query上带着range参数。

因为没发现这个请求的header里面有range参数。比如： http://v-6fce1712.71edge.com/videos/other/20231113/6b/bb/3f3fe83b89124248c3216156dfe2f4c3.f4v?dis_k=2ba39ee8c55c4d23781e3fb9f91fa7a46&dis_t=1701439831&dis_dz=CNC-BeiJing&dis_st=46&src=iqiyi.com&dis_hit=0&dis_tag=01010000&uuid=72713f52-6569e957-351&cross-domain=1&ssl=1&pv=0.1&cphc=arta&range=0-9000

#3.抖音：

抖音的方案简单粗暴，访问的链接是这个： ⇲m.ixigua.com/douyin/shar…^⇲3

通过查看控制台，我们可以发现，直接请求了一个视频的地址

没有进行分片，但用到了请求range，所以可以看到视频，是边播放边缓冲一部分。

不过我在开发的时候发现，目前租用的服务云厂商，默认会帮我们实现这项技术。

因为我把mp4视频上传到云服务器，通过链接进行播放的时候，就是边缓冲边播放的。

我们可以直接把这个视频地址拿出来，放到浏览器里面能直接播放，这样观察更明显。

但B站和爱奇艺却不能这样，因为他们采用的m4s和f4v都不是一种通用的视频格式，需要使用专门的软件或工具才能打开和编辑。

#4.小红书：

测试用的例子链接：⇲www.xiaohongshu.com/discovery/i…^⇲4

小红书的方案更加简单粗暴，打开控制台，直接告诉你就是请求一个mp4，然后直接播放就完事了。

#5.总结

看完了以上的各家大厂的方案，我们可以看到，基本原理都是边播放边加载，减少直接加载大视频文本的成本。并且通过分片传输，还能动态控制视频码率（清晰度）。做到根据网速，加载不同码率的分片文件，做到动态码率适应。

同时采用的视频格式，比如f4v，m4s，都不是能直接播放的媒体格式，需要一定的处理。增加盗取视频的成本，增加一定的安全性。

如果没有强要求，也可以直接采用mp4，或者直接用video播放一个视频文件地址。

#二.常见的视频格式与协议

我们知道视频的常见格式有mp4，同时上面介绍了B站播放用的m4s格式，爱奇艺用的f4v格式

• •除了这些还有哪些视频格式？

• •为什么有这么多视频格式，有哪些不同点呢？

• •为什么这些公司会采用这种格式来播放视频呢？

#1. B站用的m4s

M4S格式不是一种通用的视频格式，需要使用专门的软件或工具才能打开和编辑。

M4S 通常会和 MPEG-DASH 流媒体技术一起，通过流式传输的视频的一小部分。播放器会按接收顺序播放这些片段。第一个 M4S 段会包含一些初始化的数据标识。

MPEG-DASH 是一种自适应比特率流媒体技术，通过将内容分解为一系列不同码率的M4S片段，然后根据当前网络带宽进行自动调整。如果想在在web音视频中采用DASH技术，可以看下 ⇲github.com/Dash-Indust…^⇲5

#2. 爱奇艺的f4v

F4V是一种流媒体格式，它是由Adobe公司推出的，继FLV格式之后支持H.264编码的流媒体格式。F4V格式的视频不是一种通用的视频格式，但通常情况下，都可以将文件后缀改为FLV，这样就可以使用支持FLV的播放器进行观看。

FLV格式跟常见的MP4格式比起来，结构更加简单，所以加载metadata(视频元数据，比如视频时长等信息)会更快。具体结构我们可以在这里查到：⇲en.wikipedia.org/wiki/Flash_…^⇲6

比如，这是FLV文件的标准头，定义了从几个比特到几个比特之间，是什么含义。我们知道后，可以用MediaSource进行读取和转码。

而MP4格式会稍微复杂一些，具体标准在 ⇲ISO/IEC 14496-12^⇲7 大概有两百多页，这里放不下，对这方面有兴趣的可以自行查看。

然而这并不表示MP4更差，因为它是一种基础通用标准，所以定义上会留有很多空间，和各种情况，甚至允许在标准之内进行自行发挥和扩展。而FLV格式则更加固定，但优点也是更加简单。

对于FLV的视频播放，我们可以采用：⇲github.com/bilibili/fl…^⇲8flvjs主要作用就是用MediaSource将flv转码成mp4从而喂给浏览器进行播放。

接下来是一些其他的视频格式，简单介绍一下：

#3.AVI

文件名以.avi结尾，AVI