代码:
<template>
<div class="video-play-page">
<div id="J_prismPlayer">
<!-- <div class="author" v-show="isFullScreen">
<img src="" alt="" />
<div>
<h3>地表最强</h3>
<p>6787 粉丝</p>
</div>
<button>关注</button>
</div> -->
</div>
</div>
</template>
<script>
export default {
name: 'video-play',
props:{
url:String,
// video:
},
data() {
return {
player: '',
isFullScreen:false
};
},
destroyed() {
this.player && this.player.dispose();
},
methods: {
loadVideo() {
this.player && this.player.dispose()
console.log(this.url);
this.buildPlayer(this.url);
},
buildPlayer(source) {
const vm = this;
vm.player = new Aliplayer(
{
id: 'J_prismPlayer',
autoplay: true,
isLive: false,
playsinline: true,
width: '100%',
height: '210px',
// 支持播放地址播放,此播放优先级最高
source,
playsinline: true,
preload: true,
controlBarVisibility: 'hover',
useH5Prism: true, //启用H5播放器
useFlashPrism: false,
},
(pl) => {
console.log('播放器创建好了。', pl);
}
);
},
},
watch:{
url(){
this.loadVideo()
}
}
};
</script>
原因:Aliplayer2.7.2版本,使用dispose会将id为 'J_prismPlayer'的元素删除
解决:使用2.7.4版本
找到吐血,发现是版本问题。。。。。。