最近公司准备上一套视频播放的项目，对此我很兴奋，视频播放一直是技术中比较热门板块，并且又是一个比较老的板块。想要一个视频可以成功在网页中播放，我从一个懵逼状态到到真的实现播放总结了如下几个步骤。
上传
正常情况需要有一段可以播放的视频，视频格式其实无所谓， .mp4 .avi 都可以，一般保证在上传的时候保证第一手视频是非常清晰的原视频。但是如果视频太大的话就是上传的时候会慢点。由于七牛的各项费用我觉得都还不是特步贵，所以依然选择了七牛。这里涉及的其实是七牛的对象存储，七牛对于上传提供两种方式表单上传和分片上传，如果上传的资源文件小于 1gb，前者就行了，如果要使用分片上传最好是使用七牛的 sdk 了。这里我上传资源时后端接口返回到前端一个 token 和 key ，前端直接用 form 上传到七牛就行。
转码
这块其实是我研究很久的一块，视频为什么需要转码？这个问题不太好回答，那么接着问自己，什么是视频？如果我说视频是一张张连续播放的带着背景音乐的图片可能很多人也不会反对。那肯定会有这样的问题， 什么是图片？，图片又是一个很有意思的话题，如果以后专门有研究再开篇说图片，计算机世界里面这些视频和图片都是一堆有组织有预谋有规律的文件，前期按照一定的规则进行编码存储，后期按一定的编码打开，其实这里面还少一个阶段那就是现在的互联网时代，还会产生一个从服务端到客户端按一定编码进行传输。
百度百科-视频编码 洋洋洒洒几千字，反正最终胜出者是 H.264，这是一个非常了不起的编码标准，它是集编码效率高，占用空间小，清晰度高等多个特性与一身，所以现在世面上大多数视频都是采用了这个标准。目前有个最新编码是 H.265，貌似又是一个非常厉害的编码格式有一统视频编码的趋势，但是由于并非所有浏览器都兼容，所以不得已选择了更为稳健的 H.264，如果时间充裕，后期可以考虑上多个源，前端自由搭配。
其实转码就是将原视频先解码再编码成合适的视频源，七牛和又拍云上一直提示转码的功能，我开始很懵逼，难道一定需要用他们自家的转码转的视频才能在网页上播放吗，转码到底是为播放准备些什么，不过写到这里问题肯定都是迎刃而解了。公司目前有人负责视频上传，对上传者有转码的培训和要求，所以转码可以在上传前就完成，但是如果播放的时候需要选择多个视频源，要求高清、2k、4k，这时候本地转码就显得效率低下了，使用云转码显然要便捷太多。
顺便普及一下视频清晰度，网络视频清晰和模糊会取决于多个因素，但是最重要的因为应该是网络带宽与速度、视频的编码以及视频的分辨率。网速暂且不论，编码无非是 H.264 和H.265，那最后的视频分辨率其实是代表视频画面的宽高，标准如下。
| 分辨率 | 别名 | 宽高 |
|---|---|---|
| 4K | 4K | 3840x2160 |
| 2K | 2K | 2560x1440 |
| FHD | 1080P、超清 | 1920x1080 |
| HD | 720P、高清 | 1280x720 |
| LD | - | 960x540 |
| SD | 标准 | 640x480 |
分辨率越高视频细节就越丰富，需要传输的内容也就越多。
切片
通过上面转码后的视频原则上就已经可以支持播放了，但是为什么会有切片这个过程？是因为往往一个 50mb 的视频文件，需要下载完成后才能进行播放，那么下载的过程就让用户白白等待了，为了打破视频下载中不能播放的情况，m3u8 应运而生，简单点说就是对一个特别长的视频进行分块切片，切成一段一段的，最终生成一堆的 .ts 文件和一个 .m3u8 的目录文件，播放视频的时候，只需要接入 m3u8 的地址，播放的时候会自动检索需要下载的片段，这样就完美解决了边下边播的问题了。
其实这里还想补充一个小插曲，就是放在七牛上的视频，不进行切片也是可以“分片播放”的，这个当时确实有点惊呆了，难道七牛自动给我切片了，还是什么原因，打开 chrome 的控制台，发现浏览器一直在发送 http 请求，返回的结果 http code 都是 206，追寻着这个足迹，又去研究了下什么是 206 请求，原来是七牛服务器做的断点续传，每次请求返回都是源文件的一个片段，客户端这边对这一个片段进行解码播放就 ok 了，我觉得这个也算一个伪切片的功能。
播放
使用 html5 的 video 标签就可以进行各种视频的播放了,或者 video.js 等其他播放器。如果用到视频加密，可以选择一些定制化视频播放器，视频加密后，通过特殊播放器解密。
网友评论