412 lines
9.1 KiB
JavaScript
412 lines
9.1 KiB
JavaScript
import $ from "jquery";
|
||
export default {
|
||
data() {
|
||
return {
|
||
player: null, //播放器
|
||
videoTimer: null, //定时器
|
||
curTime: null, //播放器当前播放进度
|
||
curStatus: null, //播放器当前播放状态
|
||
playerConfig: {
|
||
id: "url-player-test",
|
||
width: "100%", //容器的大小
|
||
height: "100%", //容器的大小
|
||
qualitySort: "asc",
|
||
cover: "",
|
||
autoplay: true,
|
||
isLive: false,
|
||
rePlay: false,
|
||
playsinline: true,
|
||
controlBarVisibility: "hover",
|
||
useH5Prism: true,
|
||
skinLayout: [],
|
||
},
|
||
|
||
skinLayoutIos: [{
|
||
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: "prism-speed-selector",
|
||
align: "tr",
|
||
x: 15,
|
||
y: 12,
|
||
},
|
||
{
|
||
name: "volume",
|
||
align: "tr",
|
||
x: 5,
|
||
y: 10,
|
||
},
|
||
],
|
||
},
|
||
],
|
||
skinLayoutAndroid: [{
|
||
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: "prism-speed-selector",
|
||
align: "tr",
|
||
x: 15,
|
||
y: 12,
|
||
},
|
||
{
|
||
name: "volume",
|
||
align: "tr",
|
||
x: 5,
|
||
y: 10,
|
||
},
|
||
],
|
||
},
|
||
]
|
||
};
|
||
},
|
||
|
||
watch: {
|
||
//播放器当前播放进度
|
||
curTime(val) {
|
||
if (this.curTime !== null) {
|
||
this.$refs.videoContent1.click();
|
||
}
|
||
},
|
||
},
|
||
|
||
created() {
|
||
|
||
|
||
this.loadWebPlayerSDK(); //引入播放器sdk、css
|
||
},
|
||
// beforeDestroy() {
|
||
|
||
|
||
// if (this.player) {
|
||
// console.log('是否出发组件销毁', this.player)
|
||
// this.player.dispose();
|
||
|
||
// }
|
||
// },
|
||
methods: {
|
||
showToast(msg) {
|
||
uni.showToast({
|
||
title: msg,
|
||
duration: 2000
|
||
});
|
||
},
|
||
//检验视频 获取加密权限
|
||
checkValue() {
|
||
|
||
if (!this.videoData.vid && !this.isfresh) {
|
||
setTimeout(() => {
|
||
this.checkValue();
|
||
}, 1000);
|
||
} else {
|
||
this.initAliyunPlayer();
|
||
}
|
||
},
|
||
|
||
//引入播放器sdk、css
|
||
loadWebPlayerSDK() {
|
||
return new Promise((resolve, reject) => {
|
||
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.charset = "utf-8";
|
||
s_tag.onload = () => {
|
||
const s_tag1 = document.createElement("script"); // 引入播放器js
|
||
s_tag1.type = "text/javascript";
|
||
s_tag1.src =
|
||
"https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js";
|
||
s_tag1.charset = "utf-8";
|
||
s_tag1.onload = () => {
|
||
this.checkValue();
|
||
resolve();
|
||
};
|
||
document.body.appendChild(s_tag1);
|
||
};
|
||
document.body.appendChild(s_tag);
|
||
|
||
const l_tag = document.createElement("link"); // 引入播放器css
|
||
l_tag.rel = "stylesheet";
|
||
l_tag.href =
|
||
"https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/skins/default/aliplayer-min.css";
|
||
|
||
document.body.appendChild(l_tag);
|
||
});
|
||
},
|
||
|
||
//初始化播放器
|
||
initAliyunPlayer() {
|
||
var components = [{
|
||
name: "RateComponent", //倍速组件
|
||
type: AliPlayerComponent.RateComponent,
|
||
}]
|
||
if (this.platform != 'ios') {
|
||
var fullScreenButtonComponent = Aliplayer.Component({
|
||
init: function(status, toAddress) {
|
||
this.fullScreenStatus = status;
|
||
this.$html = $(".fullScreenButton-container");
|
||
},
|
||
createEl: function(el) {
|
||
this.$html.find(".ad").attr("src", this.adAddress);
|
||
var $adWrapper = this.$html.find(".ad-wrapper");
|
||
$adWrapper.attr("href", this.toAddress);
|
||
$adWrapper.click(function() {});
|
||
$(el).find(".prism-time-display").after(this.$html);
|
||
},
|
||
});
|
||
|
||
components = [...components, {
|
||
name: "adComponent", //自定义全屏组件
|
||
type: fullScreenButtonComponent,
|
||
}, ]
|
||
}
|
||
|
||
//设置播放基本配置
|
||
var playerOptions = {
|
||
...this.playerConfig,
|
||
components: components,
|
||
skinLayout: this.platform == 'ios' ? this.skinLayoutIos : this.skinLayoutAndroid
|
||
};
|
||
|
||
if (this.videoData.encryptType == 1) {
|
||
playerOptions = {
|
||
...playerOptions,
|
||
vid: this.videoData.vid,
|
||
playauth: this.videoData.playAuth, // 必选参数，参数值可通过调用GetVideoPlayAuth接口获取。
|
||
encryptType: 1, // 必选参数，当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
|
||
playConfig: {
|
||
EncryptType: "AliyunVoDEncryption",
|
||
},
|
||
};
|
||
} else {
|
||
playerOptions = {
|
||
...playerOptions,
|
||
source: this.videoData.source,
|
||
|
||
};
|
||
}
|
||
var player = new Aliplayer(playerOptions, (player) => {
|
||
player.on("ready", () => {
|
||
this.player = player;
|
||
var lastTime = this.firstTime
|
||
if (this.platform == "ios") {
|
||
|
||
this.player.one("canplay", () => {
|
||
this.player.seek(this.firstTime);
|
||
});
|
||
} else {
|
||
this.player.seek(this.firstTime);
|
||
}
|
||
|
||
this.player.one('timeupdate', () => {
|
||
if (!this.player.tag.seeking) {
|
||
// 更新最近一次的播放位置
|
||
lastTime = parseInt(this.player.getCurrentTime())
|
||
this.curTime = lastTime;
|
||
}
|
||
});
|
||
this.player.on('timeupdate', () => {
|
||
if (!this.player.tag.seeking) {
|
||
// 更新最近一次的播放位置
|
||
lastTime = parseInt(this.player.getCurrentTime())
|
||
this.curTime = lastTime;
|
||
}
|
||
});
|
||
this.player.on("ended", () => {
|
||
lastTime = parseInt(this.player.getCurrentTime())
|
||
this.curTime = lastTime;
|
||
this.$refs.videoContent2.click();
|
||
|
||
});
|
||
});
|
||
});
|
||
},
|
||
|
||
//调用 recordTime 方法 存本地播放时长
|
||
emitData(event, ownerInstance) {
|
||
ownerInstance.callMethod("recordTime", this.curTime);
|
||
},
|
||
|
||
//调用 setVideoFirtsetTime 设置初始播放
|
||
emitSetData(event, ownerInstance) {
|
||
ownerInstance.callMethod("setVideoFirtsetTime");
|
||
},
|
||
|
||
//调用 openShow 设置ios 不能播放私用加密 提示信息
|
||
emitopenShow(event, ownerInstance) {
|
||
ownerInstance.callMethod("openShow");
|
||
},
|
||
|
||
//调用 handleEnd 存储视频播放信息
|
||
endEmitData(event, ownerInstance) {
|
||
ownerInstance.callMethod("handleEnd");
|
||
},
|
||
|
||
//调用 screenChange + 设置全屏
|
||
changeVideoScreen(event, ownerInstance) {
|
||
var status = this.player.fullscreenService.getIsFullScreen();
|
||
ownerInstance.callMethod("screenChange", {
|
||
status: status,
|
||
primary: status ? "portrait" : "landscape",
|
||
});
|
||
|
||
if (status) {
|
||
setTimeout(() => {
|
||
plus.screen.lockOrientation("portrait-primary"); //锁死屏幕方向为竖屏
|
||
this.player.fullscreenService.cancelFullScreen();
|
||
}, 100);
|
||
} else {
|
||
this.player.fullscreenService.requestFullScreen();
|
||
setTimeout(() => {
|
||
plus.screen.lockOrientation("landscape-primary");
|
||
}, 100);
|
||
}
|
||
},
|
||
|
||
//调用 changeVideoData 切换播放源
|
||
changeVideoData(event, ownerInstance) {
|
||
ownerInstance.callMethod("changeVideoData");
|
||
},
|
||
//成功销毁
|
||
handleSuccessDispose(event, ownerInstance) {
|
||
ownerInstance.callMethod("dispose");
|
||
},
|
||
//销毁播放器
|
||
receiveisDispose(newValue, oldValue, ownerVm, vm) {
|
||
if (newValue) {
|
||
if (this.player) {
|
||
console.log('是否触发方法组件销毁', this.player)
|
||
this.player.dispose();
|
||
this.$refs.videoContent5.click()
|
||
}
|
||
}
|
||
},
|
||
//切换播放源
|
||
async receiveIsChange(newValue) {
|
||
if (this.isChange) {
|
||
this.checkValue();
|
||
}
|
||
},
|
||
|
||
handleClick(event, ownerInstance) {}, //点击播放器
|
||
|
||
receiveFirstTime(newValue, oldValue, ownerVm, vm) {}, //播放时间
|
||
|
||
receiveisSetFirstTime(newValue, oldValue, ownerVm, vm) {}, //是否刚开始设置播放时间
|
||
|
||
receiveplatform(newValue) {}, //获取设备型号
|
||
|
||
receiveVideoList(newValue, oldValue, ownerVm, vm) {}, //获取视频列表
|
||
|
||
receiveVideoData(newValue, oldValue, ownerVm, vm) {}, //获取视频信息
|
||
|
||
receiveWinWidth(newValue, oldValue, ownerVm, vm) {}, //获取视频宽度
|
||
|
||
receiveWinHeight(newValue, oldValue, ownerVm, vm) {}, //获取视频高度
|
||
|
||
|
||
|
||
},
|
||
}; |