WEB 视频开发-视频保护&广告艺术

作者 | 翁鹏

 42

这篇文章通过 HLS 的方式介绍如何保护视频和插入视频广告。

视频安全

有些视频是需要付费或者开通会员才能观看，那么怎么保护这些视频呢？最常用的方法就是服务器鉴权，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 >