tcplayer 源码改造第一弹 -> 自定义加密

前序

简介

• 主要介绍了基于tcplayer的源码改造，完成自定义的hls加密，保证知识产权
• 不涉及tcplayer的使用以及框架如何调用，详情请看腾讯云点播文档
• 源码解析中有些注释是笔者加的，如需定位，请不要复制注释
• git仓库地址:

人群

• 适用于需要保护视频原作权的各类网站的开发人员
• 不适合没有任何前端基础的小白，请谨慎观看

git地址

https://github.com/HaverLee1/hls-player

hls自定义加密方案实现

1. 后端将上传到服务器的视频进行切片处理
2. 读取m3u8文件并保存到数据库
3. 后端编写接口将m3u8文件以自定义加密的形式传递给前端
4. 前端解密后放入播放器进行播放
5. 如图所示
   
   本文章实现4、5两个步骤，后续将会增加步骤1、2、3（自定义hls加密播放，java+ffmpeg切片方案）。
   将实现基于tcplayer的自定义加密，将后端传递的加密数据解密后再放入原有的播放器进行播放。
   
   
   

准备工具

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..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文件

参数说明

在原有播放器支持的参数下添加了一个参数

加入hls索引文件的自定义加密方式

hls.min.0.12.4_hava.js文件中定位’解密操作’字样,加入自定义的解密方式,将解密后的m3u8索引字符串赋值给u

使用示例

var player = new TcPlayer('id_test_video', { 
    "m3u8": "http://2157.liveplay.myqcloud.com/2157_a.m3u8", //请替换成实际可用的播放地址 "autoplay" : true, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的 "poster" : "http://www.test.com/myimage.jpg", "width" : '480',//视频的显示宽度，请尽量使用视频分辨率宽度 "height" : '320'//视频的显示高度，请尽量使用视频分辨率高度 "encryptHls": "./hls.0.12.4_hava.js", }); 

相关推荐

• tcplayer源码改造第一弹 -> 自定义hls加密播放器
• tcplayer源码改造第二弹 -> 加入倍速播放
• tcplayer源码改造第三弹 -> 防盗录
• tcplayer 源码改造第四弹 -> 字幕(srt)
• tcplayer源码改造第五弹 -> 兼容sarafi/遨游