開發中主要用到的是視頻點播和私有加密播放，在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的私有加密播放方式！
