VideoJS视频数量和源切换导致视频加载失败的问题
使用VideoJS的基本方法暂时不详细说明，有很多大佬已经有很详细的使用方法，本文旨在说明视频切换时无妨正常渲染的问题。
首先我的项目是视频页面不切换，根据左侧的树节点切换而显示对应节点的视频。之前找的资料都是说使用dispose()方法，但是我每次使用这个方法之后页面就无法使用VideoJS的插件了，视频渲染错误如下：
如果不进行dispose()操作，则在切换节点时，页面报错已经存在相同的player实例。
解决方法：
在每次实例player的时候，使用不同的id。我使用的是和时间挂钩的id，接口中新增了一个参数。这样切换的时候视频就不会报错了。
提示，每次节点切换的时候要清空playerlist，同时初始化下空的数据。
效果图如下：
附具体的代码：
html部分：
<div class="disassemblyVideo-content-video-screen"> <video :id="‘myVideo‘+item.id" class="video-js vjs-big-play-centered" ref="videoRef"> <source :src="urlPrefix+item.videoSource" type="video/mp4" /> video> div>
js部分：
watch: {
// 监听点击的节点数据
BOMTreeParams: {
handler (newValue) {
this.videoLoading = true
this.parentNode = newValue.iPartNumber
this.playlist.forEach(player => {
player.pause()
})
this.playlist = []
this.videoList = []
this.getVideo()
},
// 深度监听
deep: true,
immediate: true
},
// 监听视频源数据的变化
videoList: function () {
this.$nextTick(function () {
console.log(‘videoList change‘, this.videoList)
this.initVideo()
})
}
},
// destroyed () {
// this.$refs.videoRef.dispose()
// },
methods: {
// 初始化播放器
initVideo () {
// this.disposePlayer()
// 初始化视频方法 循环列表获取每个视频的id
this.videoList.map((item, i) => {
// let flag = true
// this.playlist.forEach(player => {
// if (‘myVideo‘ + item.itemId === player.id_) {
// console.log(player.id_)
// flag = false
// }
// })
// if (flag) {
let myPlayer = this.$video(‘myVideo‘ + item.id, {
// 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
controls: true,
// 自动播放属性,muted:静音播放
// autoplay: ‘muted‘,
// 建议浏览器是否应在
原文：https://www.cnblogs.com/tale-zhang/p/15064971.html