90 lines
2.0 KiB
Vue
90 lines
2.0 KiB
Vue
<template>
|
|
<div id="player" style="width: 100%;height: 300px;"></div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
src: {
|
|
type: String,
|
|
default () {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
vodPlayerJs: 'https://player.polyv.net/resp/vod-player/latest/player.js',
|
|
vid: '',
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
this.loadPlayerScript(this.loadPlayer);
|
|
},
|
|
watch: {
|
|
// 监听 src 变化，当父组件 filepaths 更新时触发
|
|
src(newVal, oldVal) {
|
|
if (newVal && newVal !== oldVal) {
|
|
const parsedUrl = new URL(newVal);
|
|
let vid = parsedUrl.searchParams.get('vid');
|
|
// 当 src 变化时，执行重新加载逻辑
|
|
// this.reloadVideo();
|
|
this.player.changeVid({
|
|
wrap: '#player',
|
|
width: '100%',
|
|
height: '100%',
|
|
vid: vid,
|
|
// ban_seek:'on',
|
|
ban_history_time: "on", // 开启续播
|
|
ban_seek_by_limit_time: 'on',
|
|
showHd: false,
|
|
showAuto: false,
|
|
showLine: false,
|
|
speed: false,
|
|
// hideRepeat:true
|
|
}) // 切换下一个视频
|
|
}
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
loadPlayerScript(callback) {
|
|
if (!window.polyvPlayer) {
|
|
const myScript = document.createElement('script');
|
|
myScript.setAttribute('src', this.vodPlayerJs);
|
|
myScript.onload = callback;
|
|
document.body.appendChild(myScript);
|
|
} else {
|
|
callback();
|
|
}
|
|
},
|
|
|
|
loadPlayer() {
|
|
const parsedUrl = new URL(this.src);
|
|
this.vid = parsedUrl.searchParams.get('vid');
|
|
const polyvPlayer = window.polyvPlayer;
|
|
this.player = polyvPlayer({
|
|
wrap: '#player',
|
|
width: '100%',
|
|
height: '100%',
|
|
vid: this.vid,
|
|
ban_history_time: "on", // 开启续播
|
|
ban_seek_by_limit_time: 'on',
|
|
showHd: false,
|
|
showAuto: false,
|
|
showLine: false,
|
|
speed: false,
|
|
// hideRepeat:true
|
|
})
|
|
this.player.on('s2j_onPlayOver', (...params) => {
|
|
this.$emit('over')
|
|
})
|
|
}
|
|
},
|
|
destroyed() {
|
|
if (this.player) {
|
|
this.player.destroy();
|
|
}
|
|
}
|
|
};
|
|
</script> |