Aliplayer视频点播加密播放
程序员文章站
2022-12-22 12:15:03
开发中主要用到的是视频点播和私有加密播放，在JavaScript中使用没有什么问题，主要是在vue中使用cdn加载aliplayer，实现视频的加密鉴权播放和时间鉴权控制，最主要的就是在vue中和aliplayer中this的指向问题。 ......
aliplayer视频播放器填坑
aliplayer视频点播分为flash和html5两个版本，移动端不支持flash播放器。
flash播放器兼容ie8+，html5播发器支持比较新的浏览器，对浏览器的版本要求较flash播放器对浏览器的版本的要求要高一些。
其中：
h5播放器在移动端不支持flv和rtmp的播放
播放flv、m3u8视频，pc端支持的浏览器，需要启用
hls标准加密与mps私有加密对比
| 加密类型/设备环境 | ios | android | pc |
|---|---|---|---|
| 标准加密 hls | √ | √ | chrome firefox safari edge ie 11+for windows8.1+ |
| 私有加密 mps | × | chrome for android | chrome firefox safari edge ie 11+for windows8.1+ |
aliplayer播放器demo
注：aliplayer在线配置网址
html代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>用户测试用例</title>
<!-- aliplayer样式表 -->
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
<!-- aliplayer flash版&html5版 -->
<script src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js" type="text/javascript" charset="utf-8"></script>
<!-- flash版 -->
<script src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-flash-min.js" type="text/javascript" charset="utf-8"></script>
<!-- html5版 -->
<script src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-h5-min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="prism-player" id="j_prismplayer"></div>
</body>
</html>
javascript代码：
var player = new aliplayer({
id: 'j_prismplayer',
width: '100%',
autoplay: true,
//支持播放地址播放,此播放优先级最高
source: '播放url',
//播放方式二：点播用户推荐
vid: '',
playauth: 'ddd',
cover: 'logo.png',
//播放方式三：仅mps用户使用（私有加密播放）
vid: '',
accid: 'dd',
accsecret: 'dd',
ststoken: 'dd',
domainregion: 'dd',
authinfo: 'dd',
//播放方式四：使用sts方式播放
vid: '',
accesskeyid: 'dd',
securitytoken: 'dd',
accesskeysecret: 'dd',
region: 'cn-shanghai',
}, function(player) {
console.log('播放器创建好了。')
});
vue中使用aliplayer播发器
注：现在index.html中引入aliplayer的css和js，或者在当前vue文件中引入aliplayer的css和js。
<template> ... <!-- 引入aliplayer播放器 --> <div class="prism-player" id="player-con"></div> ... </template>
初始化aliplayer播发器
export default {
data() {
return {
player: {},
timer: null
};
},
created() {
this.loading = this.$loading({
background: "rgba(0, 0, 0, 0.5)",
text: "拼命加载中"
});
},
methods: {
// 销毁和重建aliplayer
changeplayer(dt) {
this.player.dispose();
this.initplayer(dt);
},
// 获取视频播放信息
getkeyinfo(videoid, flag) {
this.$axios.post(
"xxxxxtoken",
qs.stringify({
videoid
})
).then(res => {
let data = res.data;
if (data.code == 1) {
let dt = data.result_data;
// 是否初次创建？初次创建播放器：销毁和重建播发器
flag ? this.initplayer(dt) : this.changeplayer(dt);
}
});
},
// 初始化视频播放器
initplayer(data) {
// 清空dom节点
document.getelementbyid("player-con").innerhtml = "";
// 改变this指向，使其指向当前this指向。
let _this = this,
token = sessionstorage.getitem("token"),
userid = sessionstorage.getitem("userid"),
isconfirm = sessionstorage.getitem("isconfirm");
this.player = new aliplayer({
id: "player-con", // 播放器id
format: "m3u8", // 视频格式
width: "100%",
height: "450px",
playsinline: true,
preload: true,
encrypttype: 1,
// hls标准加密为0（默认）,mps私有视频加密为1
controlbarvisibility: "always",
useh5prism: true,
// 视频底部状态工具栏设置，默认为false，全显示
skinlayout: [{
name: "bigplaybutton",
align: "blabs",
x: 30,
y: 80
},
{
name: "h5loading",
align: "cc"
},
{
name: "errordisplay",
align: "tlabs",
x: 0,
y: 0
},
{
name: "infodisplay"
},
{
name: "tooltip",
align: "blabs",
x: 0,
y: 56
},
{
name: "thumbnail"
},
{
name: "controlbar",
align: "blabs",
x: 0,
y: 0,
children: [{
name: "progress",
align: "blabs",
x: 0,
y: 44
},
{
name: "playbutton",
align: "tl",
x: 15,
y: 12
},
{
name: "timedisplay",
align: "tl",
x: 10,
y: 7
},
{
name: "fullscreenbutton",
align: "tr",
x: 10,
y: 12
},
{
name: "volume",
align: "tr",
x: 5,
y: 10
}
]
}
],
// mps
vid: 'vid',
accid: 'accid',
accsecret: 'accsecret',
ststoken: 'ststoken',
domainregion: "cn-beijing",
authinfo: '{"expiretime": "' +
expiretime +
'","mediaid": "' +
videoid +
'","signature": "' +
signature +
'"}'
},
function(player) {
// html5版本的视频事件写在当前callback中
player.play();
// 定时器
let clear = () => {
if (_this.timer) {
cleartimeout(_this.timer);
_this.timer = null;
}
};
// 获取播放时间
let gettimes = () => {
if (player.getcurrenttime() >= 60) {
if (isconfirm == 0) {
player.pause();
player.fullscreenservice.cancelfullscreen();
}
}
// 递归回调，计算播放时间
_this.timer = settimeout(gettimes, 1000);
};
player.on("ready", function(e) {
// 首次播放
clear();
gettimes();
player.on("play", function(e) {
// 播放视频
clear();
gettimes();
});
player.on("pause", function(e) {
// 暂停视频播放
clear();
});
player.on("ended", function(e) {
// 视频播放结束
clear();
});
player.on("error", function(e) {
// 视频播放失败
clear();
});
});
}
);
},
// 切换视频播放源：使用函数截流，防止多次触发影响数据展示
switchvideo: debounce(function(index, videoid, isperchase) {
this.mark = index;
this.getkeyinfo(videoid);
this.isperchase = isperchase == undefined ? true : isperchase;
}, 500)
},
// 生命周期钩子函数：销毁
destroyed() {
// 清除定时器
clearinterval(this.timer);
this.timer = null;
let play = this.player,
len = object.keys(play);
if (!len) return;
// 销毁播放器
play.dispose();
}
};
注：播放器中隐藏了画中画、画质切换、视频下载等功能。
同时需要注意的是，aliplayerh5视频点播 在ios移动端是不支持的，苹果移动端不支持aliplayer的私有加密播放方式！
下一篇： xxl-job源码分析