这篇文章通过 HLS 的方式介绍如何保护视频和插入视频广告。
[[TOC]]
视频安全
有些视频是需要付费或者开通会员才能观看，那么怎么保护这些视频呢？最常用的方法就是服务器鉴权，HTTP 请求的时候带上一个签名，服务器判断当前用户是否有权观看这个视频。
这里还是使用上篇文章音视频分离中制作的 HLS 视频。通过上篇文章设置好后，就可以更改 js 代码，如下：
import Hls from 'hls.js';
const video = document.querySelector('video')
const url = 'http://127.0.0.1:8001/master.m3u8'
const hls = new Hls({
xhrSetup(xhr, url) {
xhr.open('GET', url + '?sign=授权签名', true)
},
});
hls.loadSource(url)
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, () => {
video.play();
});
这里只是给 hls.js 添加了 xhrSetup 参数来将签名加到 url 后面，让每个请求都带上这个签名。当然也可以服务器端返回的 m3u8 文件中就将签名加上。
hls.js 有两个 loader 一个是 xhr-loader 一个是 fetch-loader。不过所有请求都是通过 xhr-loader 发送的。要想自定义请求，可以添加 loader 参数，实现自己的 loader。
随机文件名
我们发现视频名称很有规律，很容易就知道另一个文件名。可以在生成分段名的时候加上一些随机字符。
-hls_segment_filename "%v_$(uuidgen).ts"
这里给每个文件名加上了 uuid。如果想用时间的做分段的名的话可以加上 -strftime 1 -strftime_mkdir 1，然后名字就可以使用 %Y%m%d%H%M%S 这些表达字符表示目录或文件名，注意这时候不能使用 single_file 这个 flag。
ffmpeg -i sample.mpeg \
-f hls -hls_time 3 -hls_list_size 5 \
-hls_flags second_level_segment_index+second_level_segment_size+second_level_segment_duration \
-strftime 1 -strftime_mkdir 1 -hls_segment_filename "segment_%Y%m%d%H%M%S_%%04d_%%08s_%%013t.ts" stream.m3u8
视频加密
一般视频保护上面的方法就足够了，优酷的 VIP 视频就是使用的上面的方法。但是如果打开开发者工具选择一个 ts 请求，右键点击在新窗口打开就可以直接下载视频，并且可以使用本地播放器直接播放视频。
如果想让视频下载下来也不能观看的话可以对视频片段进行 AES128 加密，AES128 是 HLS 最常用的加密，并且 hls.js 也支持这种加密，它是对称加密（使用同一个密钥进行加密和解密）。
要进行加密首先要生成一个密钥。
openssl rand 16 > file.key
# 用 openssl 生成一个密钥文件
使用 ffmpeg 对 HLS 视频加密，还需要一个 keyinfo 文件，文件格式如下：
http://www.www.com/path/file.key # hls 客户端获取密钥文件地址
file.key # ffmpeg 获取密钥文件地址
7c3cb56562d0a10827489996dead35eb # 可选的 16 进制初始化向量，不指定则使用段序列号加密
echo file.key > file.keyinfo
echo file.key >> file.keyinfo
echo $(openssl rand -hex 16) >> file.keyinfo
通过上面命令创建好 keyinfo 文件后，就可以使用 ffmpeg 生成加密的 HLS 视频了。
ffmpeg -threads 0 -vsync 1 -i ./video.mp4 \
-lavfi '[0] scale=1280:720[hd],[0] scale=1920:1080[fhd]' \
-c:v libx264 -c:a aac -b:v:0 2800k -b:a:0 128k -b:v:1 5000k -b:a:1 192k \
-map '[hd]' -map 0:a -map '[fhd]' -map 0:a \
-var_stream_map 'v:0,agroup:hd,name:video_hd a:0,agroup:hd,name:audio_hd v:1,agroup:fhd,name:video_fhd a:1,agroup:fhd,name:audio_fhd' \
-f hls -master_pl_name master.m3u8 \
-ar 44100 -ac 2 -g 120 -keyint_min 120 -sc_threshold 0 -muxpreload 0 -muxdelay 0 \
-hls_key_info_file ./file.keyinfo -hls_time 10 -hls_playlist_type vod -hls_list_size 0 \
-hls_segment_filename "%v%03d.ts" %v.m3u8
通过 -hls_key_info_file 参数指定 keyinfo 文件。
如果这时候我们点击一个视频文件播放，就会提示无法播放。
ffmpeg -hide_banner -i ./video_hd000.ts
./video_hd000.ts: Invalid data found when processing input
--- video_fhd.m3u8
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-PLAYLIST-TYPE:VOD
#EXT-X-KEY:METHOD=AES-128,URI="file.key",IV=0x7c3cb56562d0a10827489996dead35eb
#EXTINF:10.000000,
video_fhd000.ts
#EXTINF:10.000000,
video_fhd001.ts
#EXTINF:10.000000,
video_fhd002.ts
#EXT-X-ENDLIST
这时候刷新浏览器就可以看到对 key 文件的请求。
视频广告
HLS 广告
视频中插入广告可以使用 HLS 的 #EXT-X-DISCONTINUITY 标签，因为广告和视频的分辨率，码率等信息不同，当从广告切换到视频会产生视频质量的下降，这个标签就可以通知客户端提前做好准备。
ffmpeg -i ad.mp4 -c:v libx264 -c:a aac \
-hls_init_time 0 -g 120 -keyint_min 120 -sc_threshold 0 -muxpreload 0 -muxdelay 0 \
-hls_time 5 -hls_playlist_type vod -hls_list_size 0 \
-hls_segment_filename "ad_%03d.ts" master.m3u8
ffmpeg -i video.mp4 -c:v libx264 -c:a aac \
-hls_init_time 0 -g 120 -keyint_min 120 -sc_threshold 0 -muxpreload 0 -muxdelay 0 \
-hls_time 10 -hls_flags append_list -hls_playlist_type vod -hls_list_size 0 \
-hls_segment_filename "video_%03d.ts" master.m3u8
-hls_flags append_list 告诉 ffmpeg 添加到最后，而不是替换原文件。
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-PLAYLIST-TYPE:VOD
#EXTINF:5.005333,
ad_000.ts
#EXTINF:5.005333,
ad_001.ts
#EXTINF:0.500533,
ad_002.ts
#EXT-X-DISCONTINUITY
#EXTINF:10.000000,
video_003.ts
#EXTINF:10.000000,
video_004.ts
#EXTINF:10.000000,
video_005.ts
#EXT-X-ENDLIST
动态获取广告
上面这种方法对于视频点播来说并不实用。我们可以保持 m3u8 只包含视频内容的信息，然后通过 HTTP 请求去获取广告。
视频广告主要分为 Liner 和 NonLiner 两种类型。
Liner 广告
Liner 广告就是我们常看到的视频广告。它会打断正片的播放，可以查播在正片之前，之后和中间。
要实现 Liner 广告，可以用一堆的 video 元素，每个 video 元素都是一个广告，多个广告组合成一个播放列表，一次播放完毕。用 CSS 覆盖正片的 video 的广告。
const player = document.querySelector('.player') // 正片视频
const linerContaniner = document.querySelector('.liner') // 视频广告容器
let prevPlayerCurrentTime = 0
let currentAd = null
let playlist = []
class Video {
constructor() {
this.dom = document.createElement('video')
this.dom.addEventListener('ratechange', this.onRateChange)
this.dom.addEventListener('timeupdate', this.onTimeUpdate)
this.dom.addEventListener('seeking', this.onSeeking)
this.dom.addEventListener('ended', this.onEnded)
this.prevTime = 0
}
onRateChange = () => {
this.dom.playbackRate = 1 // 禁止改变播放速度
}
onTimeUpdate = () => {
if (!this.dom.seeking) this.prevTime = this.dom.currentTime
}
onSeeking = () => {
const delta = this.dom.currentTime - this.prevTime
if (Math.abs(delta) > 1) this.dom.currentTime = this.prevTime // 禁止 seek
}
onEnded = () => {
this.dom.parentNode.removeChild(this.dom)
playNext() // 播放下一个广告
}
play() {
this.dom.play()
}
}
function playLinerAds() {
const ads = getAds() // 获取当前需要播放的广告
playlist = ads.map(ad => ({ ad, video: new Video(ad) }))
// 禁用当前正片
prevPlayerCurrentTime = player.currentTime
player.addEventListener('play', player.pause)
player.addEventListener('timeupdate', player.pause)
player.pause()
playlist.forEach(ad => {
linerContainer.appendChild(ad.video.dom)
})
linerContaniner.hidden = false // 显示视频广告
playNext()
}
function playNext() {
if (!playlist.length) return end()
const ad = playlist.shift()
currentAd = ad
ad.video.play()
}
function end() { // 恢复播放
player.removeEventListener('play', player.pause)
player.removeEventListener('timeupdate', player.pause)
player.currentTime = this.prevPlayerCurrentTime;
player.play()
linerContaniner.hidden = true
}
上面的代码省略了很多的细节，比如视频播放出错的处理，视频加载的处理，广告倒计时等问题。还有很多浏览器会禁止视频带声音的自动播放，所以当广告播放失败时，应该使用静音播放，再失败时再采用用户点击播放。
NonLiner 广告
NonLiner 广告并不会打断正片的播放，它可以是一张图片，视频或一个 iframe，下面来实现一个暂停的弹框广告。
const player = document.querySelector('.player') // 正片视频
const nonLiner = document.querySelector('.liner') // 弹框广告容器
const img = new Image()
img.src = getImgSrc() // 获取图片的链接
nonLiner.appendChild(img)
player.addEventListener('play', () => { nonLiner.hidden = false })
player.addEventListener('timeupdate', () => { nonLiner.hidden = true })
总结
这篇文章介绍了如何使用 HLS 来实现加密，对于 DASH 来说实现方式也类似。视频广告是使用多个 video 元素加载，当然也可以通过 MSE 的方式只使用一个 video 元素进行广告加载。
参考