最近公司要做一個(gè)賣視頻的產(chǎn)品，既然是賣視頻童太，那視頻當(dāng)然得加個(gè)密，不讓別人隨便下載咯胸完。而且是課程類的視頻书释，一個(gè)視頻長度都在一個(gè)小時(shí)左右，那就也得考慮流量問題赊窥。
如果是使用普通的mp4視頻格式爆惧，既容易被下走，又非常浪費(fèi)流量锨能，如果用戶看了前百分之十的視頻內(nèi)容就不想看或者想下次再看扯再，但是以2018年的網(wǎng)速，說不定就已經(jīng)把所有視頻全都下好了址遇，既浪費(fèi)了用戶的流量熄阻，也浪費(fèi)了公司的流量，錢從兩邊都嘩嘩的流到了電信公司的手里倔约。
所以需要選擇一個(gè)視頻看了多少秃殉，那就加載多少并且再多加載一丟丟的播放方法或者播放格式，經(jīng)過公司大佬們的商量，選擇了使用七牛的音視頻切片钾军。將一整個(gè)音頻鳄袍、視頻流切割成可由HTTP下載的一個(gè)個(gè)小音視頻流，并生成一個(gè)M3U8播放列表吏恭，客戶端根據(jù)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文件只是做了視頻切片，可以達(dá)到節(jié)流需求樱哼，任何人拿到就可播（當(dāng)然你得有個(gè)能播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這種內(nèi)容，EXT-X-KEY是m3u8規(guī)定好的加密字段搅幅，如果包含這個(gè)字段勾栗，那么再訪問ts視頻之前會(huì)先去請(qǐng)求這個(gè)URI去獲取一個(gè)密鑰(key)，再拿著這個(gè)key去訪問ts視頻才能播放盏筐。很明顯围俘，如果要做到不是誰都能看視頻的話胧奔，那就得再這個(gè)獲取key的URI上動(dòng)手腳赁温，不是自己人就不給你key。
搞懂了這部分就可以開始前端的工作了钦椭。先來看看hls的兼容性漾抬，既然是蘋果出的方案宿亡，那么ios部分肯定是支持的，令人驚訝的是Edge的兼容性也很高纳令。
<video id=video class="real-video" controls :poster='videoInfo.coverImageUrl'>
<source :src="videoInfo.videoUrl" type="application/x-mpegURL">
</video>
現(xiàn)是使用上述第二種m3u8格式，但是URI未加鑒權(quán)直接返回key值的m3u8文件來測試捏雌。但是在調(diào)試的時(shí)候發(fā)現(xiàn)安卓沒毛病跃赚，但是ios移動(dòng)端無論如何都播放不了加密后的視頻，這就有點(diǎn)頭大了性湿，這不是apple自己出的嗎纬傲？怎么死活播不出來？調(diào)了半天播不出來肤频，搜“HLS safari mobile”里面說的全是原生支持叹括，但是我這里原生就是出不來。
原生不能播宵荒，那就用插件咯汁雷，用了hls.js净嘀、videojs7、video6.* + videojs-contrib-hls摔竿、ckplayer都沒成功播放出來(也有可能是我姿勢(shì)不對(duì))，弄了兩天都沒弄出個(gè)所以然來少孝，去找后端負(fù)責(zé)視頻切片加密的大佬继低，發(fā)現(xiàn)我們使用的m3u8不只是hls加密，而且還在這個(gè)基礎(chǔ)上使用了rsa加密稍走，讓他把rsa加密去掉后袁翁，safari mobile使用原生video標(biāo)簽播放就啥問題都沒了。然后……然后就去掉了rsa加密只使用hls加密了[捂臉哭]婿脸，所以safari mobile播放hls加密+rsa加密文件還是沒解決（路過的大佬有方法的話粱胜，求指教呀~）。
既然雙端播放hls加密（沒加鑒權(quán)）視頻沒問題的話狐树，那就可以開始加上鑒權(quán)來進(jìn)行測試了焙压。
簡單點(diǎn)說，鑒權(quán)其實(shí)就是在訪問這個(gè)URI時(shí)抑钟，帶上特定的cookie讓后端來判斷是否是合法用戶涯曲，在我這個(gè)項(xiàng)目中，
- 用戶登陸是用test.abc.com的接口在塔，
- 項(xiàng)目是在m.abc.com上幻件，
- 視頻是在video.def.com里，
- m3u8中的URI是test.abc.com的接口蛔溃，
非炒铝ぃ混亂，但是除了視頻地址贺待，其余的都有一個(gè)統(tǒng)一的一級(jí)域名徽曲，所以在后端傳cookie來的時(shí)候，domain可以改為.abc.com來匹配所有abc.com的二級(jí)域名麸塞。這個(gè)方案在ios部分是可行的疟位，我所需要的user_tocken以及vidoe_ticket 在訪問m3u8中URI時(shí)，都成功的被攜帶了過去喘垂，并且成功獲取到了密鑰(key)甜刻。
但是在安卓的webview中，不被允許有這樣跨域的訪問正勒，URI的訪問沒有帶上任何cookie得院，即便是將domain改為test.abc.com。這頭痛的設(shè)定又讓我試了幾個(gè)視頻框架章贞，但是都沒有處理好這個(gè)問題祥绞，最終選擇了修改m3u8文件的URI為m.abc.com，然后再在nginx中進(jìn)行代理，代理到test.abc.com上蜕径，一頓騷操作……終于能成功播放了两踏。
整個(gè)項(xiàng)目使用的vue框架，想動(dòng)態(tài)修改視頻src時(shí)兜喻，想當(dāng)然的寫的:src="videoInfo.videoUrl"梦染，但是在實(shí)際操作中發(fā)現(xiàn)，即便動(dòng)態(tài)的修改了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();
其實(shí)也可以使用vue的$refs屬性而不是原生的dom操作。
好了遂铡，項(xiàng)目終于完整的跑通了……遇到的問題很多肮疗，還未解決的問題也很多，但是學(xué)到的東西也挺多的扒接，嘿……
這篇文章一定也有很多錯(cuò)誤或者不夠完善的地方伪货，還望指出一同進(jìn)步~~
