Aliplayer视频点播加密播放
Aliplayer视频播放器填坑
aliplayer视频点播分为Flash和HTML5两个版本，移动端不支持Flash播放器。<br />Flash播放器兼容IE8+，HTML5播发器支持比较新的浏览器，对浏览器的版本要求较Flash播放器对浏览器的版本的要求要高一些。<br />其中：<br />h5播放器在移动端不支持flv和rtmp的播放<br />播放flv、m3u8视频，PC端支持的浏览器，须要启用容许跨域访问javascript
HLS标准加密与MPS私有加密对比
| 加密类型/设备环境 | iOS | Android | PC |
|---|---|---|---|
| 标准加密 HLS | √ | √ | Chrome<br />Firefox<br />Safari<br />Edge<br />IE 11+for Windows8.1+ |
| 私有加密 MPS | × | Chrome for Android | Chrome<br />Firefox<br />Safari<br />Edge<br />IE 11+for Windows8.1+ |
Aliplayer播放器Demo
注：Aliplayer在线配置网址<br />HTML代码：css
<!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代码：html
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('播放器建立好了。')
});
注：aliplayer属性和接口使用说明vue
Vue中使用Aliplayer播发器
注：如今index.html中引入aliplayer的css和js，或者在当前vue文件中引入aliplayer的css和js。html5
<template> ... <!-- 引入aliplayer播放器 --> <div class="prism-player" id="player-con"></div> ... </template>
初始化aliplayer播发器java
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的私有加密播放方式！ios
相关文章
- 1. 视频加密播放
- 2. 视频播放进行加密
- 3. .NET MVC对接POLYV——HTML5播放器播放加密视频
- 4. nginx搭建点播视频（Mp4播放）
- 5. 视频点播 SDK-播放器问题
- 6. 播放视频
- 7. 前端视频插件Aliplayer播放器简单使用（基于地址播放）
- 8. Android 视频播放器 (三)：使用NBPlayer播放直播视频
- 9. 视频点播
- 10. 使用ffmpeg视频切片并加密和视频AES-128加密后播放
- 更多相关文章...
- • XML DOM 添加节点 - XML DOM 教程
- • SVG 渐变- 放射性 - SVG 教程
- • Git可视化极简易教程 — Git GUI使用方法
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 外部其他进程嵌入到qt FindWindow获得窗口句柄 报错无法链接的外部符号 [email protected] 无法被([email protected]@[email protected]@@引用
- 2. UVa 11524 - InCircle
- 3. The Monocycle（bfs）
- 4. VEC-C滑窗
- 5. 堆排序的应用-TOPK问题
- 6. 实例演示ElasticSearch索引查询term,match,match_phase,query_string之间的区别
- 7. 数学基础知识 集合
- 8. amazeUI 复择框问题解决
- 9. 背包问题理解
- 10. 算数平均-几何平均不等式的证明,从麦克劳林到柯西
欢迎关注本站公众号,获取更多信息
