vue+elementui+video.js时播放M3U8格式视频,首次渲染可正常播放,切换下一个视频后报错并黑屏。
原因在于video的ID值重复导致冲突,替换成不同的ID值即可。
<el-dialog title="免费试看" :visible.sync="dialogVisible" ref="videoDialog" :before-close="closeDialog" width="null"
custom-class="_this-video">
<div class="container">
<video :id="'video' + courseId" ref="video" :src="nowPlayVideoUrl" class="video-js vjs-default-skin" muted
style="width:100%"></video>
</div>
</el-dialog>
VIDEO传递不同的ID值过去。
initVideo() {
let _this = this;
// 这些options属性也可直接设置在video标签上,见 muted
let options = {
autoplay: true, // 设置自动播放
controls: true, // 显示播放的控件
sources: [
{
src: _this.nowPlayVideoUrl,
type: "application/x-mpegURL"
}
]
};
let player = Videojs("video" + this.courseId, options, function onPlayerReady() {
console.log("onPlayerReady 中的this指的是:", this); // 这里的this是指Player,是由Videojs创建出来的实例
console.log(player === this); // 这里返回的是true
});
},
player接收不同的VIDEO的ID值即可。