#Aliplayer 加密播放
#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
阿里云播放器
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();
},
};注意事项
- 播放器中隐藏了画中画、画质切换、视频下载等功能；
- PC 端移动端均可实现拉流直播，一般采用.m3u8 的视频流进行视频直播；
- 若采想了解更多直播、点播播放器相关知识，请前往我的语雀博客笔记。