最近公司要做一個賣視頻的產品，既然是賣視頻，那視頻當然得加個密，不讓別人隨便下載咯。而且是課程類的視頻，一個視頻長度都在一個小時左右，那就也得考慮流量問題。
如果是使用普通的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的兼容性也很高。
<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操作。
好了，項目終于完整的跑通了……遇到的問題很多，還未解決的問題也很多，但是學到的東西也挺多的，嘿……
這篇文章一定也有很多錯誤或者不夠完善的地方，還望指出一同進步~~
