大厂技术 高级前端 Node进阶
点击上方 程序员成长指北，关注公众号
回复1，加入高级Node交流群
作者：然燃 （感谢小伙伴投稿分享）
原文链接: https://juejin.cn/post/7307934456995856419
最近又遇到了
web
视频化的场景，之前也有过调研：H5视频化调研浅析1
但这次稍微复杂一些，这次解决的是：
- 视频播放的技术方案调研
服务端实现：
- 视频转码
- 生成不同码率的视频
- 进行视频标准加密
- 不同码率视频合并，用于动态码率播放
web
端实现
web端播放器的设计web端播放器的自定义扩展- 可拖拽进度条
- 音量控制
- 根据当前带宽自适应码率切换
- 手动清晰度切换
- 倍速播放
- 样式自定义覆盖
- 标准加密视频播放
- 基于原生开发，可在所有框架运行，统一跨框架情况
- 各浏览器控件统一
其中
web
端源码已添加
MIT
协议并完全开源，如果看完对大家有帮助的话，欢迎大家
star
,
issue
,
pr
，也希望能友好交流～
demo地址：⇲https://chaxus.github.io/ran/src/ranui/player/
源码地址：⇲https://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
我们可以检查这个链接请求
https://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
参数。比如：
https://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
进行读取和转码。
Field Data Type Default Details Signature 签名byte[3]"FLV" 始终就是“FLV”Version 版本uint81 只有0x01才有效Flags 标志uint8 位掩码0x050x04是音频，0x01是视频（所以0x05是音频+视频）Header Size uint32_be9用于跳过较新的扩展标头
而
MP4
格式会稍微复杂一些，具体标准在 ⇲ISO/IEC 14496-12⇲7 大概有两百多页，这里放不下，对这方面有兴趣的可以自行查看。
然而这并不表示
MP4
更差，因为它是一种基础通用标准，所以定义上会留有很多空间，和各种情况，甚至允许在标准之内进行自行发挥和扩展。而
FLV
格式则更加固定，但优点也是更加简单。
对于
FLV
的视频播放，我们可以采用：⇲github.com/bilibili/fl…⇲8
flvjs
主要作用就是用
MediaSource
将
flv
转码成
mp4
从而喂给浏览器进行播放。
接下来是一些其他的视频格式，简单介绍一下：
#3.
AVI
文件名以
.avi
结尾，
AVI
版权归原作者 傲娇的koala 所有， 如有侵权，请联系我们删除。