tcplayer 源码改造第一弹 -> 自定义加密
原创
前序
简介
- 主要介绍了基于tcplayer的源码改造，完成自定义的hls加密，保证知识产权
- 不涉及tcplayer的使用以及框架如何调用，详情请看腾讯云点播文档
- 源码解析中有些注释是笔者加的，如需定位，请不要复制注释
- git仓库地址: 人群
- 适用于需要保护视频原作权的各类网站的开发人员
- 不适合没有任何前端基础的小白，请谨慎观看git地址https://github.com/HaverLee1/hls-player
hls自定义加密方案实现
- 后端将上传到服务器的视频进行切片处理
- 读取m3u8文件并保存到数据库
- 后端编写接口将m3u8文件以自定义加密的形式传递给前端
- 前端解密后放入播放器进行播放
- 如图所示
本文章实现4、5两个步骤，后续将会增加步骤1、2、3（自定义hls加密播放，java+ffmpeg切片方案）。 将实现基于tcplayer的自定义加密，将后端传递的加密数据解密后再放入原有的播放器进行播放。
hls自定义加密方案实现图
准备工具
TCPlayerLite
可由腾讯点播获取
hls.js
同样也是腾讯提供的hls文件
ide
客官可随意，能用就行
源码改造(各位客官请自行格式化代码)
添加配置参数
在代码中定位videoSource,可定位到如下相似代码,下面的代码中加注释的即为笔者新增的参数
function t(i, o) {
n(this, t);
var s = l(o);
M = ["od", "hd", "sd"];
var a = {
owner: i,
videoSource: s,
src: s.curUrl,
autoplay: o.autoplay,
live: o.live,
flash: o.flash,
flashUrl: o.flashUrl,
poster: o.poster,
width: o.width,
height: o.height,
volume: o.volume,
listener: o.listener,
wording: o.wording,
controls: o.controls,
clarity: o.clarity,
clarityLabel: o.clarityLabel,
showLoading: "boolean" != typeof o.showLoading || o.showLoading,
pausePosterEnabled: void 0 === o.pausePosterEnabled || o.pausePosterEnabled,
fullscreenEnabled: void 0 === o.fuScrnEnabled || o.fuScrnEnabled,
systemFullscreen: o.systemFullscreen || !1,
hls: o.hls || "0.12.4",
h5_flv: o.h5_flv,
x5_player: o.x5_player !== !1,
x5_type: o.x5_type,
x5_fullscreen: o.x5_fullscreen,
x5_orientation: o.x5_orientation,
x5_playsinline: o.x5_playsinline,
preload: o.preload || "auto",
hlsConfig: o.hlsConfig,
flvConfig: o.flvConfig,
// 表示加密的hls文件,设置该参数表示开启自定义加密
encryptHls: o.encryptHls,
};
return r(this, e.call(this, a))
}去除m3u8文件校验
须知：若客官使用的api接口带有.m3u8字样，可跳过该步骤
由于笔者使用的接口本身不带有.m3u8字样，在直接播放时会出现播放失败的情况，调试发现在播放器中，加入了对文件名检验的处理。如源码所示：
var i = e.indexOf(".m3u8") > -1 || t == f.VideoType.M3U8, o = e.indexOf(".flv") > -1;考虑到业务需求上并不需要flv形式，并且保证传递的数据都是m3u8格式，所以在此时改为：
var i = 1, o = 0; // i=1表示为.m3u8文件，o=0表示不为.flv文件解密接口传来的m3u8索引文件
实际的播放并不在tcpalyer.js中，而是调用了另外的js，即hls.js，由下面的源码（tcplayer.js）可知，在没有指定hls的版本时，tcplayer默认使用0.12.4版本
// tcplayer.js
hls: o.hls || "0.12.4",在hls.js文件中：
// hls.js
e.readyState || e.open("GET", t.url, !0)此处调用了GET请求，即请求m3u8索引文件、ts文件、加密ts的key文件，而实际处理请求结果就在下面几行：
// hls.js
var u = void 0, d = void 0;
d = "arraybuffer" === o.responseType ? (u = t.response).byteLength : (u = t.responseText).length, n.loaded = n.total = d;本方案是加密m3u8索引文件，所以改成如下：
// hls.js
// 将解密后的m3u8索引字符串赋值给u
var u = 解密操作, d = void 0;
d = "arraybuffer" === o.responseType ? (u = t.response).byteLength : (u = t.responseText).length, n.loaded = n.total = d;由于使用了改造过的hls.js文件，所以回到tcplayer.js文件，定位"f.CDNPath + r",可以找到如下代码：
// tcplayer.js f.CDNPath='https://imgcache.qq.com/open/qcloud/video/vcplayer/‘，r='libs/hls.min.0.12.4.js'
var n = this, r = w[this.options.hls] || w["0.7.1"];
i ? (this.__type = f.VideoType.M3U8, "undefined" == typeof window.Hls ? h.loadScript(f.unifyProtocol(f.CDNPath + r), function () {将引用的hls.js文件加一个判断，如代码：
// tcplayer.js 加入对encryptHls的判断,如果设置了encryptHls蚕食,则使用自定义的hls.js文件进行解析
var n = this, r = w[this.options.hls] || w["0.7.1"];
i ? (this.__type = f.VideoType.M3U8, "undefined" == typeof window.Hls ? h.loadScript(f.unifyProtocol(this.player.options.encryptHls ? this.player.options.encryptHls : (f.CDNPath + r)), function () {使用说明
使用时请先压缩js文件
参数说明
在原有播放器支持的参数下添加了一个参数
参数 | 类型 | 默认值 | 参数说明 |
|---|---|---|---|
encryptHls | String | 无 | 表示调用的用于解析视频的hls文件,设置该参数表示开启自定义解析(可加入自定义加密),不设置该参数则表示使用tcplayer默认的解析 |
加入hls索引文件的自定义加密方式
hls.min.0.12.4_hava.js文件中定位'解密操作'字样,加入自定义的解密方式,将解密后的m3u8索引字符串赋值给u
使用示例
var player = new TcPlayer('id_test_video', {
"m3u8": "http://2157.liveplay.myqcloud.com/2157_358535a.m3u8", //请替换成实际可用的播放地址
"autoplay" : true, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
"poster" : "http://www.test.com/myimage.jpg",
"width" : '480',//视频的显示宽度，请尽量使用视频分辨率宽度
"height" : '320'//视频的显示高度，请尽量使用视频分辨率高度
"encryptHls": "./hls.0.12.4_hava.js",
});相关推荐
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。