最近公司要做一个卖视频的产品，既然是卖视频，那视频当然得加个密，不让别人随便下载咯。而且是课程类的视频，一个视频长度都在一个小时左右，那就也得考虑流量问题。
如果是使用普通的mp4视频格式，既容易被下走，又非常浪费流量，如果用户看了前百分之十的视频内容就不想看或者想下次再看，但是以2018年的网速，说不定就已经把所有视频全都下好了，既浪费了用户的流量，也浪费了公司的流量，钱从两边都哗哗的流到了电信公司的手里。
所以需要选择一个视频看了多少，那就加载多少并且再多加载一丢丢的播放方法或者播放格式，经过公司大佬们的商量，选择了使用七牛的音视频切片。将一整个音频、视频流切割成可由HTTP下载的一个个小音视频流，并生成一个M3U8播放列表，客户端根据M3U8播放列表依次加载播放视频——即HTTP Live Streaming(HLS)播放。
常见的两种普通m3u8文件格式：
第一种：
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-ALLOW-CACHE:YES
#EXT-X-TARGETDURATION:24
#EXTINF:23.200000,
/7aq_l2qC3ULNDfVn0EVIGDP_SkQ=/lkUGxqs1gCaHdB3PBj_mbywxZpLS/000000.ts
#EXTINF:11.300000,
/7aq_l2qC3ULNDfVn0EVIGDP_SkQ=/lkUGxqs1gCaHdB3PBj_mbywxZpLS/000001.ts
#EXT-X-ENDLIST
这种m3u8文件只是做了视频切片，可以达到节流需求，任何人拿到就可播（当然你得有个能播m3u8的播放器）。
第二种
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-ALLOW-CACHE:YES
#EXT-X-TARGETDURATION:11
#EXT-X-KEY:METHOD=AES-128,URI="http://ogtoywd4d.bkt.clouddn.com/hls128.key",IV=0xb279c05ae6a3d0ffd45da748cf305dd9
#EXTINF:10.927589,
/58IzAY_GglrObBBbbD98wrHIbLk=/llhpmYRGVWfZL8dyCPXwCwKovI9R/000000.ts
#EXT-X-KEY:METHOD=AES-128,URI="http://ogtoywd4d.bkt.clouddn.com/hls128.key",IV=0x4aec782ea1419fb7865ba5452cbd9413
#EXTINF:9.342667,
/58IzAY_GglrObBBbbD98wrHIbLk=/llhpmYRGVWfZL8dyCPXwCwKovI9R/000001.ts
#EXT-X-KEY:METHOD=AES-128,URI="http://ogtoywd4d.bkt.clouddn.com/hls128.key",IV=0xeac1912aaab5469783cbb742b9f6f534
#EXTINF:10.719044,
/58IzAY_GglrObBBbbD98wrHIbLk=/llhpmYRGVWfZL8dyCPXwCwKovI9R/000002.ts
#EXT-X-KEY:METHOD=AES-128,URI="http://ogtoywd4d.bkt.clouddn.com/hls128.key",IV=0x500f42c7a7c969f47bd8886444c2d198
#EXTINF:9.342667,
/58IzAY_GglrObBBbbD98wrHIbLk=/llhpmYRGVWfZL8dyCPXwCwKovI9R/000003.ts
#EXT-X-KEY:METHOD=AES-128,URI="http://ogtoywd4d.bkt.clouddn.com/hls128.key",IV=0x9b1b6e27eb70eb32c164bb12cde89a86
#EXTINF:10.468789,
/58IzAY_GglrObBBbbD98wrHIbLk=/llhpmYRGVWfZL8dyCPXwCwKovI9R/000004.ts
#EXT-X-KEY:METHOD=AES-128,URI="http://ogtoywd4d.bkt.clouddn.com/hls128.key",IV=0x947eba85bbefb54f364ce99b0121fbde
#EXTINF:9.300967,
/58IzAY_GglrObBBbbD98wrHIbLk=/llhpmYRGVWfZL8dyCPXwCwKovI9R/000005.ts
#EXT-X-ENDLIST
这种格式可以很明显的看出比上一种多了#EXT-X-KEY:METHOD=AES-128,URI="http://ogtoywd4d.bkt.clouddn.com/hls128.key",IV=0xb279c05ae6a3d0ffd45da748cf305dd9这种内容，EXT-X-KEY是m3u8规定好的加密字段，如果包含这个字段，那么再访问ts视频之前会先去请求这个URI去获取一个密钥(key)，再拿着这个key去访问ts视频才能播放。很明显，如果要做到不是谁都能看视频的话，那就得再这个获取key的URI上动手脚，不是自己人就不给你key。
搞懂了这部分就可以开始前端的工作了。先来看看hls的兼容性，既然是苹果出的方案，那么ios部分肯定是支持的，令人惊讶的是Edge的兼容性也很高。
HLS播放的兼容情况
在2018的今天ios以及android移动端都原生支持hls加密播放了，这真是个好消息，正好这个项目又不需要做pc部分，那么直接用原生开撸就好了。
<video id=video class="real-video" controls :poster='videoInfo.coverImageUrl'>
<source :src="videoInfo.videoUrl" type="application/x-mpegURL">
</video>
现是使用上述第二种m3u8格式，但是URI未加鉴权直接返回key值的m3u8文件来测试。但是在调试的时候发现安卓没毛病，但是ios移动端无论如何都播放不了加密后的视频，这就有点头大了，这不是apple自己出的吗？怎么死活播不出来？调了半天播不出来，搜“HLS safari mobile”里面说的全是原生支持，但是我这里原生就是出不来。
原生不能播，那就用插件咯，用了hls.js、videojs7、video6.* + videojs-contrib-hls、ckplayer都没成功播放出来(也有可能是我姿势不对)，弄了两天都没弄出个所以然来，去找后端负责视频切片加密的大佬，发现我们使用的m3u8不只是hls加密，而且还在这个基础上使用了rsa加密，让他把rsa加密去掉后，safari mobile使用原生video标签播放就啥问题都没了。然后……然后就去掉了rsa加密只使用hls加密了[捂脸哭]，所以safari mobile播放hls加密+rsa加密文件还是没解决（路过的大佬有方法的话，求指教呀~）。
既然双端播放hls加密（没加鉴权）视频没问题的话，那就可以开始加上鉴权来进行测试了。
简单点说，鉴权其实就是在访问这个URI时，带上特定的cookie让后端来判断是否是合法用户，在我这个项目中，
- 用户登陆是用test.abc.com的接口，
- 项目是在m.abc.com上，
- 视频是在video.def.com里，
- m3u8中的URI是test.abc.com的接口，
非常混乱，但是除了视频地址，其余的都有一个统一的一级域名，所以在后端传cookie来的时候，domain可以改为.abc.com来匹配所有abc.com的二级域名。这个方案在ios部分是可行的，我所需要的user_tocken以及vidoe_ticket 在访问m3u8中URI时，都成功的被携带了过去，并且成功获取到了密钥(key)。
但是在安卓的webview中，不被允许有这样跨域的访问，URI的访问没有带上任何cookie，即便是将domain改为test.abc.com。这头痛的设定又让我试了几个视频框架，但是都没有处理好这个问题，最终选择了修改m3u8文件的URI为m.abc.com，然后再在nginx中进行代理，代理到test.abc.com上，一顿骚操作……终于能成功播放了。
整个项目使用的vue框架，想动态修改视频src时，想当然的写的:src="videoInfo.videoUrl"，但是在实际操作中发现，即便动态的修改了src，但是视频依旧按照原来的链接播放的。其解决方法是：
this.videoInfo = Object.assign(this.videoInfo, newVideo);
// this.$refs.realVideo.src = this.videoInfo.videoUrl
// this.$refs.realVideo.load()
document.querySelector("#video>source").src = this.videoInfo.videoUrl
document.querySelector("#video").load();
其实也可以使用vue的$refs属性而不是原生的dom操作。
好了，项目终于完整的跑通了……遇到的问题很多，还未解决的问题也很多，但是学到的东西也挺多的，嘿……
这篇文章一定也有很多错误或者不够完善的地方，还望指出一同进步~~
网友评论