zm/sociology_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

安卓可以播放版本

Browse Source
This commit is contained in:
始于初见
2024-07-13 14:39:17 +08:00
parent 772624ba9b
commit 5c589a22fa
6 changed files with 2482 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
pages/component/commonComponents/video/AliPlayer.vue
View File

@@ -2,7 +2,7 @@
<div>
<div
class="prism-player"
id="videoContent"
id="url-player-test"
:style="playStyle"
:source="source"
:vid="vid"
@@ -147,7 +147,7 @@ export default {
//容器的大小
height: {
type: String,
default: "460px",
default: "200px",
},
//容器的大小
width: {
@@ -162,7 +162,7 @@ export default {
//视频的宽度大小
videoHeight: {
type: String,
default: "460px",
default: "200px",
},
//播放器自动加载，目前仅h5可用
preload: {
@@ -329,7 +329,7 @@ export default {
* */
definition: {
type: String,
default: "",
default: "OD",
},
/**
* 默认视频清晰度，此值是vid对应流的一个清晰度，
@@ -574,20 +574,26 @@ export default {
data() {
return {
playerId: "aliplayer_" + Math.random().toString(36).substr(2),
// playerId: "aliplayer_" + Math.random().toString(36).substr(2),
playerId: "J_prismPlayer",
scriptTagStatus: 0,
isReload: false,
instance: null,
};
},
created() {
this.loadWebPlayerSDK()
console.log('at line 584:', '是否走了')
},
beforeDestroy() {
},
mounted() {
this.loadWebPlayerSDK()
// if (window.Aliplayer !== undefined) {
// // 如果全局对象存在，说明编辑器代码已经初始化完成，直接加载编辑器
// this.scriptTagStatus = 2;
@@ -603,15 +609,17 @@ export default {
const _this = this;
console.log('check是否获取到了授权',_this.playauth);
// console.log(this.videoId, this.authId, this.videoData, "1111888888")
if (!_this.playauth ) {
if (!_this.playauth&&_this.scriptTagStatus!=2 ) {
setTimeout(() => {
this.checkValue();
}, 1000);
} else {
console.log('渲染加载视频开始')
this.scriptTagStatus = 2;
this.initAliplayer();
setTimeout(()=>{
_this.initAliplayer();
},2000)
}
},
loadWebPlayerSDK() {
@@ -621,7 +629,9 @@ export default {
const s_tag = document.createElement('script'); // 引入播放器js
s_tag.type = 'text/javascript';
s_tag.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/aliplayer-min.js';
// s_tag.src = 'https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js';
s_tag.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/aliplayer-min.js';
// s_tag.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/aliplayer-min.js';
s_tag.charset = 'utf-8';
s_tag.onload = () => {
const s_tag1 = document.createElement('script'); // 引入播放器js
@@ -630,6 +640,7 @@ export default {
'https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js';
s_tag1.charset = 'utf-8';
s_tag1.onload = () => {
this.scriptTagStatus = 2;
this.checkValue();
resolve();
@@ -674,7 +685,7 @@ export default {
}
_this.initAliplayer();
},
initAliplayer() {
async initAliplayer() {
const _this = this;
// scriptTagStatus 为 2 的时候，说明两个必需引入的 js 文件都已经被引入，且加载完成
if (
@@ -683,67 +694,74 @@ export default {
(_this.instance === null || _this.reloadPlayer)
) {
_this.instance && _this.instance.dispose();
$("#videoContent").innerHTML= ""
// $("#" + _this.playerId).innerHTML = "";
// document.querySelector( = "";
// Vue 异步执行 DOM 更新，这样一来代码执行到这里的时候可能 template 里面的 script 标签还没真正创建
// 所以，我们只能在 nextTick 里面初始化 Aliplayer
// console.log(_this.playerId,_this.playauth,'98989')
_this.$nextTick(() => {
_this.instance = new Aliplayer({
id:'videoContent',
source: _this.source,
_this.instance = new Aliplayer({
id: "url-player-test",
// source: _this.source,
vid: _this.vid,
playauth: _this.playauth,
width: _this.width,
width: '100%',
height: _this.height,
videoWidth: _this.videoWidth,
videoHeight: _this.videoHeight,
preload: _this.preload,
cover: false,
isLive: _this.isLive,
autoplay: _this.autoplay,
rePlay: _this.rePlay,
useH5Prism: _this.useH5Prism,
useFlashPrism: _this.useFlashPrism,
playsinline: _this.playsinline,
showBuffer: _this.showBuffer,
skinRes: _this.skinRes,
playsinline: true,
controlBarVisibility: "click",
// videoWidth: _this.videoWidth,
// videoHeight: _this.videoHeight,
// preload: _this.preload,
cover: "",
// isLive: _this.isLive,
// autoplay: _this.autoplay,
// rePlay: _this.rePlay,
// useH5Prism: _this.useH5Prism,
// useFlashPrism: _this.useFlashPrism,
// playsinline: _this.playsinline,
// showBuffer: _this.showBuffer,
// skinRes: _this.skinRes,
skinLayout: _this.skinLayout,
controlBarVisibility: _this.controlBarVisibility,
showBarTime: _this.showBarTime,
extraInfo: _this.extraInfo,
enableSystemMenu: _this.enableSystemMenu,
format: _this.format,
mediaType: _this.mediaType,
qualitySort: _this.qualitySort,
definition: _this.definition,
defaultDefinition: _this.defaultDefinition,
x5_type: _this.x5_type,
x5_fullscreen: _this.x5_fullscreen,
x5_video_position: _this.x5_video_position,
x5_orientation: _this.x5_orientation,
x5LandscapeAsFullScreen: _this.x5LandscapeAsFullScreen,
autoPlayDelay: _this.autoPlayDelay,
autoPlayDelayDisplayText: _this.autoPlayDelayDisplayText,
language: _this.language,
languageTexts: _this.languageTexts,
snapshot: _this.snapshot,
snapshotWatermark: _this.snapshotWatermark,
useHlsPluginForSafari: _this.useHlsPluginForSafari,
enableStashBufferForFlv: _this.enableStashBufferForFlv,
stashInitialSizeForFlv: _this.stashInitialSizeForFlv,
loadDataTimeout: _this.loadDataTimeout,
waitingTimeout: _this.waitingTimeout,
liveStartTime: _this.liveStartTime,
liveTimeShiftUrl: _this.liveTimeShiftUrl,
liveShiftSource: _this.liveShiftSource,
recreatePlayer: _this.recreatePlayer,
diagnosisButtonVisible: _this.diagnosisButtonVisible,
disableSeek: _this.disableSeek,
// controlBarVisibility: _this.controlBarVisibility,
// showBarTime: _this.showBarTime,
// extraInfo: _this.extraInfo,
// enableSystemMenu: _this.enableSystemMenu,
// format: _this.format,
// mediaType: _this.mediaType,
// qualitySort: _this.qualitySort,
// definition: _this.definition,
// defaultDefinition: _this.defaultDefinition,
// x5_type: _this.x5_type,
// x5_fullscreen: _this.x5_fullscreen,
// x5_video_position: _this.x5_video_position,
// x5_orientation: _this.x5_orientation,
// x5LandscapeAsFullScreen: _this.x5LandscapeAsFullScreen,
// autoPlayDelay: _this.autoPlayDelay,
// autoPlayDelayDisplayText: _this.autoPlayDelayDisplayText,
// language: _this.language,
// languageTexts: _this.languageTexts,
// snapshot: _this.snapshot,
// snapshotWatermark: _this.snapshotWatermark,
// useHlsPluginForSafari: _this.useHlsPluginForSafari,
// enableStashBufferForFlv: _this.enableStashBufferForFlv,
// stashInitialSizeForFlv: _this.stashInitialSizeForFlv,
// loadDataTimeout: _this.loadDataTimeout,
// waitingTimeout: _this.waitingTimeout,
// liveStartTime: _this.liveStartTime,
// liveTimeShiftUrl: _this.liveTimeShiftUrl,
// liveShiftSource: _this.liveShiftSource,
// recreatePlayer: _this.recreatePlayer,
// diagnosisButtonVisible: _this.diagnosisButtonVisible,
// disableSeek: _this.disableSeek,
encryptType: _this.encryptType,
progressMarkers: _this.progressMarkers,
vodRetry: _this.vodRetry,
liveRetry: _this.liveRetry,
"playConfig": {
"EncryptType": 'AliyunVoDEncryption'
},
// progressMarkers: _this.progressMarkers,
// vodRetry: _this.vodRetry,
// liveRetry: _this.liveRetry,
});
// 绑定事件，当 AliPlayer 初始化完成后，将编辑器实例通过自定义的 ready 事件交出去
@@ -799,30 +817,30 @@ $("#videoContent").innerHTML= ""
this.$emit("error", _this.instance);
});
let start = true;
let startProgress = 0;
let endProgress = 0;
//禁止拖动进度条
_this.instance.on("startSeek", (e) => {
if (start) {
start = false;
startProgress = _this.instance.getCurrentTime();
}
_this.instance.pause();
// this.$emit("startSeek", _this.instance);
});
// let startProgress = 0;
// let endProgress = 0;
// //禁止拖动进度条
// _this.instance.on("startSeek", (e) => {
// if (start) {
// start = false;
// startProgress = _this.instance.getCurrentTime();
// }
// _this.instance.pause();
// // this.$emit("startSeek", _this.instance);
// });
//禁止拖动进度条
_this.instance.on("completeSeek", () => {
start = true;
endProgress = _this.instance.getCurrentTime();
if (endProgress < startProgress) {
_this.instance.seek(endProgress);
} else {
_this.instance.seek(startProgress);
}
_this.instance.play();
// this.$emit("completeSeek", _this.instance);
});
// //禁止拖动进度条
// _this.instance.on("completeSeek", () => {
// start = true;
// endProgress = _this.instance.getCurrentTime();
// if (endProgress < startProgress) {
// _this.instance.seek(endProgress);
// } else {
// _this.instance.seek(startProgress);
// }
// _this.instance.play();
// // this.$emit("completeSeek", _this.instance);
// });
});
}
},