OYRC

Que sera, sera

记一次视频流播放

-OY欧阳

标签: 学习,文章,视频

最近公司要做一个卖视频的产品,既然是卖视频,那视频当然得加个密,不让别人随便下载咯。而且是课程类的视频,一个视频长度都在一个小时左右,那就也得考虑流量问题。 如果是使用普通的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操作。

好了,项目终于完整的跑通了……遇到的问题很多,还未解决的问题也很多,但是学到的东西也挺多的,嘿…… 这篇文章一定也有很多错误或者不够完善的地方,还望指出一同进步~~

CLOSE