aliplayer視頻點播分爲Flash和HTML5兩個版本,移動端不支持Flash播放器。<br />Flash播放器兼容IE8+,HTML5播發器支持比較新的瀏覽器,對瀏覽器的版本要求較Flash播放器對瀏覽器的版本的要求要高一些。<br />其中:<br />h5播放器在移動端不支持flv和rtmp的播放<br />播放flv、m3u8視頻,PC端支持的瀏覽器,須要啓用容許跨域訪問javascript
加密類型/設備環境 | 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在線配置網址<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
注:如今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