From e80763e664be64ea36ba367c15c615df78d77aa7 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期一, 08 十一月 2021 15:04:51 +0800
Subject: [PATCH] 视频详情v2
---
src/pages/shuohuangMonitorAnalyze/components/aliPlayer/index.vue | 251 ++++++++++++++++++++++++++++---------------------
1 files changed, 143 insertions(+), 108 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/aliPlayer/index.vue b/src/pages/shuohuangMonitorAnalyze/components/aliPlayer/index.vue
index ac57407..76c909a 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/aliPlayer/index.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/aliPlayer/index.vue
@@ -3,29 +3,33 @@
</template>
<script>
export default {
- name: 'VueAliplayerV2',
+ name: "VueAliplayerV2",
props: {
- source: { //鎾斁婧�(姝ゅ睘鎬у瓨鍦ㄥ垯浼樺厛浜巓ptions.source) 鍔ㄦ�佸垏鎹�,鐩墠鍙敮鎸佸悓绉嶆牸寮忥紙mp4/flv/m3u8锛変箣闂村垏鎹€�傛殏涓嶆敮鎸佺洿鎾璻tmp娴佸垏鎹€��
+ source: {
+ //鎾斁婧�(姝ゅ睘鎬у瓨鍦ㄥ垯浼樺厛浜巓ptions.source) 鍔ㄦ�佸垏鎹�,鐩墠鍙敮鎸佸悓绉嶆牸寮忥紙mp4/flv/m3u8锛変箣闂村垏鎹€�傛殏涓嶆敮鎸佺洿鎾璻tmp娴佸垏鎹€��
required: false,
type: [String],
- default: null
+ default: null,
},
markers: {
required: false,
type: Array,
- default: null
- }
+ default: null,
+ },
},
data() {
return {
- player: null, //鎾斁鍣ㄥ疄渚�
- playerId: `player-${Math.random().toString(36).substr(2).toLocaleUpperCase()}`,
+ player: null, //鎾斁鍣ㄥ疄渚�
+ playerId: `player-${Math.random()
+ .toString(36)
+ .substr(2)
+ .toLocaleUpperCase()}`,
cssLink: `/apps/shuohuangMonitorAnalyze/aliplayer-min.css`,
scriptSrc: `/apps/shuohuangMonitorAnalyze/aliplayer-min.js`,
config: {
- id: null, //鎾斁鍣ㄧ殑ID
- width: '100%',
- height: '100%',
+ id: null, //鎾斁鍣ㄧ殑ID
+ width: "100%",
+ height: "100%",
autoplay: false,
// skinLayout: false,
progressMarkers: false,
@@ -34,82 +38,83 @@
// source: 'rtmp://182.145.195.238:1935/hls/1194076936807170050',
skinLayout: [
{
- "name": "bigPlayButton",
- "align": "blabs",
- "x": 30,
- "y": 80
+ name: "bigPlayButton",
+ align: "blabs",
+ x: 30,
+ y: 80,
},
{
- "name": "H5Loading",
- "align": "cc"
+ name: "H5Loading",
+ align: "cc",
},
{
- "name": "errorDisplay",
- "align": "tlabs",
- "x": 0,
- "y": 0
+ name: "errorDisplay",
+ align: "tlabs",
+ x: 0,
+ y: 0,
},
{
- "name": "infoDisplay"
+ name: "infoDisplay",
},
{
- "name": "tooltip",
- "align": "blabs",
- "x": 0,
- "y": 56
+ name: "tooltip",
+ align: "blabs",
+ x: 0,
+ y: 56,
},
{
- "name": "thumbnail"
+ name: "thumbnail",
},
{
- "name": "controlBar",
- "align": "blabs",
- "x": 0,
- "y": 0,
- "children": [
+ name: "controlBar",
+ align: "blabs",
+ x: 0,
+ y: 0,
+ children: [
{
- "name": "progress",
- "align": "blabs",
- "x": 0,
- "y": 44
+ name: "progress",
+ align: "blabs",
+ x: 0,
+ y: 44,
},
{
- "name": "playButton",
- "align": "tl",
- "x": 15,
- "y": 12
+ name: "playButton",
+ align: "tl",
+ x: 15,
+ y: 12,
},
{
- "name": "timeDisplay",
- "align": "tl",
- "x": 10,
- "y": 7
+ name: "timeDisplay",
+ align: "tl",
+ x: 10,
+ y: 7,
},
{
- "name": "fullScreenButton",
- "align": "tr",
- "x": 10,
- "y": 12
+ name: "fullScreenButton",
+ align: "tr",
+ x: 10,
+ y: 12,
},
{
- "name": "volume",
- "align": "tr",
- "x": 5,
- "y": 10
- }
- ]
- }]
+ name: "volume",
+ align: "tr",
+ x: 5,
+ y: 10,
+ },
+ ],
+ },
+ ],
},
options: {
// source:'//player.alicdn.com/video/aliyunmedia.mp4',
- isLive: false, //鍒囨崲涓虹洿鎾祦鐨勬椂鍊欏繀濉�
- controlBarVisibility: "always",
+ isLive: false, //鍒囨崲涓虹洿鎾祦鐨勬椂鍊欏繀濉�
+ controlBarVisibility: "hover",
preload: true,
playsinline: true,
language: "zh-cn",
// useFlashPrism: false, //鎸囧畾涓篺lash
- // disableSeek: true //绂佺敤杩涘害鏉＄殑Seek锛岄粯璁ゅ�间负false
+ // disableSeek: true //绂佺敤杩涘害鏉＄殑Seek锛岄粯璁ゅ�间负false
},
events: [
/**
@@ -117,93 +122,99 @@
* 鎾斁鍣║I鍒濆璁剧疆闇�瑕佹浜嬩欢鍚庤Е鍙戯紝閬垮厤UI琚垵濮嬪寲鎵�瑕嗙洊銆�
* 鎾斁鍣ㄦ彁渚涚殑鏂规硶闇�瑕佸湪姝や簨浠跺彂鐢熷悗鎵嶅彲浠ヨ皟鐢ㄣ��
*/
- 'ready',
+ "ready",
/**
* 瑙嗛鐢辨殏鍋滄仮澶嶄负鎾斁鏃惰Е鍙戙��
*/
- 'play',
+ "play",
/**
* 瑙嗛鏆傚仠鏃惰Е鍙戙��
*/
- 'pause',
+ "pause",
/**
* 鑳藉寮�濮嬫挱鏀鹃煶棰�/瑙嗛鏃跺彂鐢燂紝浼氬娆¤Е鍙戯紝浠匟5鎾斁鍣ㄣ��
*/
- 'canplay',
+ "canplay",
/**
* 鎾斁涓紝浼氳Е鍙戝娆°��
*/
- 'playing',
+ "playing",
/**
* 褰撳墠瑙嗛鎾斁瀹屾瘯鏃惰Е鍙戙��
*/
- 'ended',
+ "ended",
/**
* 鐩存挱娴佷腑鏂椂瑙﹀彂銆�
* m3u8/flv/rtmp鍦ㄩ噸璇�5娆℃湭鎴愬姛鍚庤Е鍙戙��
* 鎻愮ず涓婂眰娴佷腑鏂垨闇�瑕侀噸鏂板姞杞借棰戙��
* PS锛歮3u8涓�鐩磋嚜鍔ㄩ噸璇曪紝涓嶉渶瑕佷笂灞傛坊鍔犻噸璇曘��
*/
- 'liveStreamStop',
+ "liveStreamStop",
/**
* m3u8鐩存挱娴佷腑鏂悗閲嶈瘯浜嬩欢锛屾瘡娆℃柇娴佸彧瑙﹀彂涓�娆°��
*/
- 'onM3u8Retry',
+ "onM3u8Retry",
/**
* 鎺у埗鏍忚嚜鍔ㄩ殣钘忎簨浠躲��
*/
- 'hideBar',
+ "hideBar",
/**
* 鎺у埗鏍忚嚜鍔ㄦ樉绀轰簨浠躲��
*/
- 'showBar',
+ "showBar",
/**
* 鏁版嵁缂撳啿浜嬩欢銆�
*/
- 'waiting',
+ "waiting",
/**
* 鎾斁浣嶇疆鍙戠敓鏀瑰彉鏃惰Е鍙戯紝浠匟5鎾斁鍣ㄣ��
* 鍙�氳繃getCurrentTime鏂规硶锛屽緱鍒板綋鍓嶆挱鏀炬椂闂淬��
*/
- 'timeupdate',
+ "timeupdate",
/**
* 鎴浘瀹屾垚銆�
*/
- 'snapshoted',
+ "snapshoted",
/**
* 鍏ㄥ睆浜嬩欢锛屼粎H5鏀寔銆�
*/
- 'requestFullScreen',
+ "requestFullScreen",
/**
* 鍙栨秷鍏ㄥ睆浜嬩欢锛宨OS涓嬩笉浼氳Е鍙戯紝浠匟5鏀寔銆�
*/
- 'cancelFullScreen',
+ "cancelFullScreen",
/**
* 閿欒浜嬩欢銆�
*/
- 'error',
+ "error",
/**
* 寮�濮嬫嫋鎷斤紝鍙傛暟杩斿洖鎷栨嫿鐐圭殑鏃堕棿銆�
*/
- 'startSeek',
+ "startSeek",
/**
* 瀹屾垚鎷栨嫿锛屽弬鏁拌繑鍥炴嫋鎷界偣鐨勬椂闂淬��
*/
- 'completeSeek'
+ "completeSeek",
],
};
},
watch: {
- source() { //鐩戝惉鎾斁婧愬彉鍖�
+ source() {
+ //鐩戝惉鎾斁婧愬彉鍖�
this.init();
},
- options: { //閰嶇疆椤规槸瀵硅薄,鍙兘娣卞害鐩戝惉
+ options: {
+ //閰嶇疆椤规槸瀵硅薄,鍙兘娣卞害鐩戝惉
handler() {
this.init();
},
- deep: true
- }
+ deep: true,
+ },
+
+ markers(newVal) {
+ this.player.setProgressMarkers(newVal);
+ },
},
mounted() {
this.$nextTick(() => {
@@ -218,23 +229,22 @@
});
},
methods: {
-
/**
* 鍒涘缓script鍜宑ss
* 鍔犺浇Alipayer鐨凷DK
*/
init() {
- const linkID = 'app__aliplayer-min-css';
- const scriptID = 'app__aliplayer-min-js';
- const head = document.getElementsByTagName('head');
- const html = document.getElementsByTagName('html');
+ const linkID = "app__aliplayer-min-css";
+ const scriptID = "app__aliplayer-min-js";
+ const head = document.getElementsByTagName("head");
+ const html = document.getElementsByTagName("html");
let scriptTag = document.getElementById(scriptID);
let linkIDTag = document.getElementById(linkID);
if (!linkIDTag) {
// console.log('linkIDTag');
- const link = document.createElement('link');
- link.type = 'text/css';
- link.rel = 'stylesheet';
+ const link = document.createElement("link");
+ link.type = "text/css";
+ link.rel = "stylesheet";
link.href = this.cssLink;
link.id = linkID;
// link.className = linkID;
@@ -242,14 +252,14 @@
}
if (!scriptTag) {
// console.log('scriptTag');
- scriptTag = document.createElement('script');
+ scriptTag = document.createElement("script");
scriptTag.type = "text/javascript";
scriptTag.id = scriptID;
// scriptTag.className = scriptID;
scriptTag.src = this.scriptSrc;
html[0].appendChild(scriptTag);
} else {
- this.initPlayer(); //杩欐牱鏄负浜嗗吋瀹归〉闈笂鏈夊涓挱鏀惧櫒
+ this.initPlayer(); //杩欐牱鏄负浜嗗吋瀹归〉闈笂鏈夊涓挱鏀惧櫒
}
//鍏煎鍗曢〉鍔犺浇鍜岀‖鍔犺浇
scriptTag.addEventListener("load", () => {
@@ -263,7 +273,7 @@
* @description SDK鏂囨。鍦板潃:https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.6.1084.131d1c4cJT7o5Z
*/
initPlayer() {
- if (typeof window.Aliplayer != 'undefined') {
+ if (typeof window.Aliplayer != "undefined") {
const options = this.deepCloneObject(this.options);
if (options) {
for (const key in options) {
@@ -274,13 +284,14 @@
this.config.id = this.playerId; //璧嬪�兼挱鏀惧櫒瀹瑰櫒id
this.config.progressMarkers = this.markers; // 鏍囨敞
// console.log("alipayer config", this.config);
- this.player && this.player.dispose(); //闃叉瀹炰緥鐨勯噸澶�
+ this.player && this.player.dispose(); //闃叉瀹炰緥鐨勯噸澶�
this.player = Aliplayer(this.config);
for (const ev in this.events) {
- this.player && this.player.on(this.events[ev], (e) => {
- // console.log(`object ${this.events[ev]}`,e);
- this.$emit(this.events[ev], e);
- });
+ this.player &&
+ this.player.on(this.events[ev], (e) => {
+ // console.log(`object ${this.events[ev]}`,e);
+ this.$emit(this.events[ev], e);
+ });
}
//閫氳繃鎾斁鍣ㄥ疄渚嬬殑off鏂规硶鍙栨秷璁㈤槄
//player.off('ready',handleReady);
@@ -390,9 +401,24 @@
* @param 鎾斁鍑瘉
* @description 浠匨PS鐢ㄦ埛鏃朵娇鐢� 浠匨PS鐢ㄦ埛鏃朵娇鐢� 鍙傛暟椤哄簭涓猴細vid銆乤ccId銆乤ccSecret銆乻tsToken銆乤uthInfo銆乨omainRegion
*/
- replayByVidAndAuthInfo(vid, accId, accSecret, stsToken, authInfo, domainRegion) {
+ replayByVidAndAuthInfo(
+ vid,
+ accId,
+ accSecret,
+ stsToken,
+ authInfo,
+ domainRegion
+ ) {
// console.log(`replayByVidAndAuthInfo 鍙傛暟椤哄簭涓猴細vid銆乤ccId銆乤ccSecret銆乻tsToken銆乤uthInfo銆乨omainRegion`,vid, accId, accSecret, stsToken, authInfo, domainRegion);
- this.player && this.player.replayByVidAndAuthInfo(vid, accId, accSecret, stsToken, authInfo, domainRegion);
+ this.player &&
+ this.player.replayByVidAndAuthInfo(
+ vid,
+ accId,
+ accSecret,
+ stsToken,
+ authInfo,
+ domainRegion
+ );
},
/**
@@ -434,7 +460,9 @@
*/
requestFullScreen() {
// console.log(`鎾斁鍣ㄥ叏灞忥紝浠匟5鏀寔`);
- this.player && this.player.fullscreenService && this.player.fullscreenService.requestFullScreen();
+ this.player &&
+ this.player.fullscreenService &&
+ this.player.fullscreenService.requestFullScreen();
},
/**
@@ -442,7 +470,9 @@
*/
cancelFullScreen() {
// console.log(`鎾斁鍣ㄥ叏灞忥紝浠匟5鏀寔`);
- this.player && this.player.fullscreenService && this.player.fullscreenService.cancelFullScreen();
+ this.player &&
+ this.player.fullscreenService &&
+ this.player.fullscreenService.cancelFullScreen();
},
/**
@@ -450,7 +480,11 @@
*/
getIsFullScreen() {
// console.log(`鑾峰彇鎾斁鍣ㄥ叏灞忕姸鎬侊紝浠匟5鏀寔銆俙,this.player && this.player.fullscreenService && this.player && this.player.fullscreenService.getIsFullScreen());
- return this.player && this.player.fullscreenService && this.player.fullscreenService.getIsFullScreen();
+ return (
+ this.player &&
+ this.player.fullscreenService &&
+ this.player.fullscreenService.getIsFullScreen()
+ );
},
/**
@@ -470,7 +504,9 @@
*/
setLiveTimeRange(beginTime, endTime) {
// console.log(`璁剧疆鐩存挱鐨勫紑濮嬫椂闂�:${beginTime},缁撴潫鏃堕棿:${endTime}锛屽紑鍚洿鎾椂绉诲姛鑳芥椂浣跨敤銆俙);
- this.player && this.player.liveShiftSerivce && this.player.liveShiftSerivce.setLiveTimeRange(beginTime, endTime);
+ this.player &&
+ this.player.liveShiftSerivce &&
+ this.player.liveShiftSerivce.setLiveTimeRange(beginTime, endTime);
},
/**
@@ -562,18 +598,17 @@
this.player && this.player.off(ev, handle);
},
-
/**
* 娣卞害鎷疯礉
* @param {*} obj
*/
deepCloneObject(obj) {
let objClone = Array.isArray(obj) ? [] : {};
- if (obj && typeof obj === 'object') {
+ if (obj && typeof obj === "object") {
for (let key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
//鍒ゆ柇ojb瀛愬厓绱犳槸鍚︿负瀵硅薄锛屽鏋滄槸锛岄�掑綊澶嶅埗
- if (obj[key] && typeof obj[key] === 'object') {
+ if (obj[key] && typeof obj[key] === "object") {
objClone[key] = this.deepCloneObject(obj[key]);
} else {
//濡傛灉涓嶆槸锛岀畝鍗曞鍒�
@@ -583,10 +618,10 @@
}
}
return objClone;
- }
-
+ },
},
- beforeDestroy() { //闃叉閲嶅鍒涘缓
+ beforeDestroy() {
+ //闃叉閲嶅鍒涘缓
this.dispose(); //閿�姣佹挱鏀惧櫒(闃叉鐩存挱鎾斁鐨勬儏鍐典笅,鎾斁鍣ㄥ凡缁忛攢姣�,鑰屽悗鍙拌繕鍦ㄧ户缁笅杞借祫婧愰�犳垚鍗￠】鐨刡ug)
// const head = document.querySelector('head');
// const cssNodes = document.querySelectorAll(`link.app__aliplayer-min-css`);
@@ -598,6 +633,6 @@
// (html && jsNodes.length > 1) && jsNodes.forEach((item, index)=>{
// if(index != 0) html.removeChild(item);
// });
- }
+ },
};
</script>
--
Gitblit v1.8.0