使用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‘,
// 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
preload: ‘auto‘,
// 设置视频播放器的显示宽度（以像素为单位）
width: ‘273‘,
// 设置视频播放器的显示高度（以像素为单位）
height: ‘163‘,
// 封面图
poster: item.pic,
controlBar: {
// 自定义按钮的位置
children: [
{
name: ‘playToggle‘
},
{
name: ‘progressControl‘
},
{
name: ‘currentTimeDisplay‘
},
{
name: ‘timeDivider‘
},
{
name: ‘durationDisplay‘
},
{
name: ‘volumePanel‘, // 音量调整方式横线条变为竖线条
inline: false
},
{
name: ‘pictureInPictureToggle‘ // 画中画播放模式
},
{
name: ‘fullscreenToggle‘
}
]
}
})
this.playlist.push(myPlayer)
// }
})
// console.log(this.playlist)
},
// 获取视频
getVideo () {
// this.$loading({
// text: ‘正在加载中...‘
// })
// let getParams = {
// iPartNumber: this.parentNode
// }
let formData = new FormData()
formData.append(‘iPartNumber‘, this.parentNode)
this.$api.dataNavigation.loadVideo(formData)
.then(res => {
this.videoLoading = false
// this.$loading().close()// 关闭按钮转圈
// console.log(res)
if (res.data.code === 10001) {
this.videoList = res.data.data.result
}
})
}
}
原文：https://www.cnblogs.com/tale-zhang/p/15064971.html