最近项目在搞视频播放,使用的是腾讯云点播,这里作一个使用总结~css
项目中涉及到上传视频,播放视频,以及视频安全等,云点播这几个功能都有,接入起来也是比较顺滑~node
项目第一步,固然是要上传视频啦~ios
这里使用的是js的sdk,详情查看 Web 端上传 SDKweb
使用的方法比较简单,下面是示例代码:axios
// 引入js sdk
<script src="//unpkg.com/vod-js-sdk-v6"></script>
// 获取签名,这里的签名须要在后端计算,由于涉及帐号安全信息
function getSignature() {
return axios.post(url).then(function (response) {
return response.data.signature;
})
};
// 初始化
const tcVod = new TcVod.default({
getSignature: getSignature // 前文中所述的获取上传签名的函数
})
// 上传视频
const uploader = tcVod.upload({
videoFile: videoFile, // 视频,类型为 File
})
// 查看上传进度
uploader.on('video_progress', function(info) {
console.log(info.percent) // 进度
})
// 上传完成回调
uploader.done().then(function (doneResult) {
// deal with doneResult
})
复制代码
getSignature用于获取上传签名,楼主的项目后台使用的是node,因此提供一下node的版本。详情可查看 客户端上传签名后端
const querystring = require('querystring');
const crypto = require('crypto');
router.get('/getSignature', function(req, res, next) {
// 肯定 app 的云 API 密钥
let secret_id = SecretId;
let secret_key = SecretKey;
// 肯定签名的当前时间和失效时间
let current = parseInt((new Date()).getTime() / 1000, 10);
let expired = current + 86400; // 签名有效期:1天
// 向参数列表填入参数,QCVB_DrmProcessFile为加密转码模板,
let arg_list = {
secretId: secret_id,
currentTimeStamp: current,
expireTime: expired,
random: Math.round(Math.random() * Math.pow(2, 32)),
// procedure为配置任务,视频上传完成后,点播后台就会执行相应的操做
// 这里设置了视频转码 以及 加密操做
procedure: 'QCVB_SimpleProcessFile({20,30,40}, 0, 10, 10)'
};
// 计算签名
let orignal = querystring.stringify(arg_list);
let orignal_buffer = new Buffer(orignal, 'utf8');
let hmac = crypto.createHmac('sha1', secret_key);
let hmac_buffer = hmac.update(orignal_buffer).digest();
let signature = Buffer.concat([hmac_buffer, orignal_buffer]).toString('base64');
let response = {
ret: 0,
data: {
signature: signature
}
};
return res.send(response);
});
复制代码
视频上传完成以后,咱们就能够播放视频了~安全
播放视频咱们使用的是 点播超级播放器 ,是点播专属的播放器,直接配置fileID & fileId便可播放点播的视频。网络
使用方式也是至关简单app
// 引入播放器
<link href="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet">
<script src="//imgcache.qq.com/open/qcloud/video/tcplayer/lib/hls.min.0.8.8.js"></script>
<script src="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.js"></script>
// 播放器容器
<video id="player-container-id" width="414" height="270" preload="auto" playsinline webkit-playsinline>
</video>
// 初始化播放器
var player = TCPlayer('player-container-id', {
fileID: fileID,
appID: appID
});
复制代码
在上传签名的时候,咱们作了预设的处理,procedure参数dom
用户上传的视频格式千差万别,对视频进行转码,将视频转为统一的格式,这种在播放的时候就能够避免因视频格式的问题致使不能播放。
加密转码与转码的不一样之处在于,视频格式通过加密处理,播放过程须要进行解密才能播放,这里能够很好的作到视频安全~
不过,点播这里提供的加密只针对hls封装格式的视频,因此转码的配置也要作hls转码,其余的就没有效果哦。
用户网络有快有慢,hls的masterplaylist能够有效解决因网络带来的播放问题。
hls添加了masterplaylist以后,在播放过程当中,能够根据网络的快慢,自动切换视频清晰度,带来更好的用户体验。
referer防盗链,根据网站referer进行限制,开启白名单referer进行防盗处理。
key防盗链,经过在控制台配置&开启key防盗链,用户播放视频时须要传key签名进行校验,校验失败则拒绝返回视频,达到防盗效果。
key防盗链相对于referer防盗链更加安全,毕竟referer能够伪造。
下面提供的是node的实现:
const crypto = require('crypto');
router.get('/getKeySign', function(req, res, next) {
// 肯定签名的当前时间和失效时间
let current = parseInt((new Date()).getTime() / 1000, 10);
let expired = current + 86400; // 签名有效期:1天
// 向参数列表填入参数
let arg_list = {
KEY: config.video.key,
appId: req.query.appId,
fileId: req.query.fileId,
t: expired.toString(16),
us: Math.round(Math.random() * Math.pow(2, 32)).toString()
};
// 计算签名
let orignal = '';
for (let item in arg_list) {
orignal += arg_list[item];
}
let md5 = crypto.createHash('md5');
let md5_buffer = md5.update(orignal).digest('hex');
let signature = md5_buffer.toString('base64');
let response = {
ret: 0,
data: {
t: arg_list.t,
us: arg_list.us,
sign: signature
}
};
return res.send(response);
});
复制代码
hls视频加密,视频加密针对的防盗用户实际上是有权限查看视频的客户,若是没有对视频内容进行加密,用户只要获取到咱们的视频,其实就能够将视频下载到本地进行播放,而hls视频加密,就是针对这种场景。就算用户拿到了视频数据,也不能轻易破解播放,那么,加密的目的就达到了~
这块相对来讲比较复杂,详细可查看 视频加密
咱们先来看几个标识
那么,咱们要作的处理实际上是比较简单的
总体上传、加密转码、播放加密视频的流程以下:
前段时间作了比较多的视频处理,因此总结了一下,加深本身的理解,同时也但愿对用到的人有所帮助~