Al reproducir vue+elementui+video.js, se reproduce el video en formato M3U8. La primera representación se puede reproducir normalmente. Después de cambiar al siguiente video, se informa un error y la pantalla está en negro.
La razón es que el valor de ID del video se repite para causar un conflicto, simplemente reemplácelo con un valor de ID diferente.
<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 pasó diferentes valores de ID en el pasado.
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
});
},El reproductor solo necesita recibir los valores de ID de diferentes VIDEO.