Web 端播放 HLS 加密视频

最近更新时间:2024-10-09 16:54:41

我的收藏
本文主要介绍如何在 Web 端播放 HLS 私有加密视频。

前置步骤

1. 创建加密视频搭建 token 服务,详情请参见 HLS 视频加密播实践
2. 配置 CORS 规则:由于 Web 端播放会对播放地址 ajax 跨域请求,需要在 COS 控制台或 CDN 控制台配置 CORS 规则,允许播放页跨域访问资源。

Web 端播放指引

1. 下载播放代码库:首先下载 JS 播放代码库,解压得到 cos_hls.js、jsencrypt.js 和 hls.js。
2. 引入到播放页面:根据播放器种类,在自己页面中引入文件,目前支持三种类型(hls.js/tcplayer/video.js)。
hls.js 引用示例:
<script src="./hls.js"></script>
<script src="./jsencrypt.js"></script>
<script src="./cos_hls.js"></script>
tcplayer 引用示例:
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v5.1.0/tcplayer.min.css" rel="stylesheet">
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v5.1.0/libs/hls.min.1.1.7.js"></script>
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v5.1.0/tcplayer.v5.1.0.min.js"></script>
<script src="./jsencrypt.js"></script>

video.js 引用示例:
<link href="https://vjs.zencdn.net/8.11.8/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/8.11.8/video.js"></script>
<script src="./jsencrypt.js"></script>
<script src="./cos_hls.js"></script>
3. 调用播放的方法:前端使用 cos_hls.js 文件封装好的 cosHls 对象来播放加密的m3u8视频文件,cosHls 对象的 play 方法参数说明如下:
参数名
说明
是否必填
类型
默认值
container
video 标签的默认值
String
playerType
播放器种类(hls.js/tcplayer/video.js)
String
playerOptions
播放器参数,在创建播放器是(hls.js/tcplayer/video.js)传入。
Object
src
请求 m3u8 接口的文件地址,需要加?ci-process=pm3u8后缀
String
useCdn
标记 src 里的域名是不是 CDN 域名
Boolean
false
getToken
获取 token 和签名的回调函数,回调的入参有 options、callback。
options 字段包含 src/publicKey/ProtectContentKey 需要透传给服务端获取 token 的接口。其中 publicKey 需要转 base64 格式再传给服务端接口。
callback 回调格式如 callback(error, {authorization: String, token: String}),其中 authorization 是 m3u8Url 请求签名,token 是播放凭证。
Function
getInstance
获取播放器实例的回调方法
Function
4. 调用播放的代码示例
<script>
// cosHLs为cos_hls.js封装的对象,使用play方法播放视频文件
cosHls.play({
// video标签的id
container: 'video',
// 支持的播放器种类(hls.js/tcplayer/video.js)
playerType: 'hls.js',
// 支持的播放器种类(hls.js/tcplayer/video.js)
playerOptions: {
// 如果是 tcplayer 需要传入 licenseUrl,参数说明 https://cloud.tencent.com/document/product/881/30818#.E5.87.86.E5.A4.87.E5.B7.A5.E4.BD.9C
// licenseUrl: '',
},
// 请求m3u8接口的文件地址
src: 'https://examplebucket-1250000000.cos.ap-beijing.myqcloud.com/hls/video.m3u8?ci-process=pm3u8',
// 标记src里的域名是不是CDN域名(false/true)
// useCdn: false,
getInstance: function (player) {
console.log(player);
},
// 请求token和签名的函数
getToken: funciton(opt, callback) {
// 新建xhr对象,进行请求
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
// /samples/hls/token为自定义请求地址,用户可自自定义
xhr.open('POST', `/hls/token`, true);
xhr.setRequestHeader('Content-Type', 'application/json')
// 请求成功返回authorization 和 token
xhr.onload = function () {
var r = JSON.parse(xhr.responseText);
var authorization = r.authorization
var token = r.token
// 回调第一个参数是 error,第二个参数四 data,包含两个字符串字段 authorization 请求签名,token 播放凭证
callback(null, {authorization, token});
};
xhr.onerror = function () {
callback('get token error');
};
// token 接口服务所需要的参数,从 sdk 获取,不需要用户填写
var data = {
src: opt.src, // 请求m3u8接口的文件地址
publicKey: window.btoa(opt.publicKey), // 加密公钥,base64 格式传给接口
protectContentKey: opt.protectContentKey, // 是否走私有加密
};
xhr.send(JSON.stringify(data));
}
})
</script>
如以上示例,hls/token 接口的参数 src 、publicKey、ProtectContentKey 不需要用户填写,SDK 会自动生成,只需要传递给 token 接口。
5. 完整的代码示例:请参见 完整源码

浏览器兼容说明

注意:
当前示例在大部分浏览器场景下默认是私有加密,当检测到部分环境(iOS Safari 或 WebView)不兼容 Media Source Extensions 对象时,会自动降级为标准加密

Demo 体验

您可在线体验 HLS 私有加密播放功能,单击前往 HLS加密视频播放体验地址