本文主要介绍如何在 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标签的idcontainer: '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 和 tokenxhr.onload = function () {var r = JSON.parse(xhr.responseText);var authorization = r.authorizationvar 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 对象时，会自动降级为标准加密。
