这是弹幕播放器系列文章第 4 篇，上篇请点击 原来爱优腾等视频网站都是用这个来播放流媒体的。播放器官网：https://nplayer.js.org/ 。
这篇文章通过 HLS 的方式介绍如何保护视频。
视频鉴权
有些视频是需要付费或者开通会员才能观看，那么怎么保护这些视频呢？最常用的方法就是服务器鉴权，HTTP 请求的时候带上一个签名，服务器判断当前用户是否有权观看这个视频。
这里还是使用上篇文章音视频分离中制作的 HLS 视频。通过 上篇文章 设置好后，就可以更改 js 代码，如下：
代码语言：javascript复制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。
随机文件名
我们发现视频名称很有规律，很容易就知道另一个文件名。可以在生成分段名的时候加上一些随机字符。
代码语言：javascript复制-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_%d_%s_%3t.ts" stream.m3u8视频加密
一般视频保护上面的方法就足够了，优酷的 VIP 视频就是使用的上面的方法。但是如果打开开发者工具选择一个 ts 请求，右键点击在新窗口打开就可以直接下载视频，并且可以使用本地播放器直接播放视频。
如果想让视频下载下来也不能观看的话可以对视频片段进行 AES128 加密，AES128 是 HLS 最常用的加密，并且 hls.js 也支持这种加密，它是对称加密（使用同一个密钥进行加密和解密）。
要进行加密首先要生成一个密钥。
代码语言：javascript复制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.keyinfoecho file.key >> file.keyinfoecho $(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 "%vd.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 来实现加密，对于 DASH 来说实现方式也类似。
- 官网：https://nplayer.js.org
- 源码：https://github.com/woopen/nplayer
- 在线编辑 & 预览：https://codesandbox.io/s/ancient-sky-ujtms?file=/src/index.js
