vue3 videojs实现播放器，动态更改src

一、背景

vue3下载第三方插件videojs，达到播放器的效果，并且点击事件能够动态更改播放器的src。实现思路：

1. 场景一：只有一个播放器，当点击事件，直接赋值，动态更改封装好的组件的src参数，能够实现切换播放器的效果。
2. 场景二：不止有一个窗口，而是多窗口，要选中多个窗口中的一个窗口，然后点击，达到动态切换选中播放器的src。

二、实现总结

1.vue框架更改对应数据data，对应的视图view变化。

2.在封装的组件监听传参src的变化，如果点击的 src和之前的不同，进行切换资源，播放器重新加载播放；

3.播放器的资源source的参数有src+type，注意type可以不设置。

推荐用法：不设置type，如果要设置一定要更传过来的视频流的数据格式保持一致，否则会爆红。

三、效果展示

四、完整代码 

(一)、封装组件 

 组件封装，videojs封装成一个组件：

完整代码：

(二)、局部引入 

 页面引入，引入封装的组件：

完整代码：

五、核心代码

 封装组件的监听watch:

watch(() => props.src, (now) => {
  if (now) {
    videoPlayer.pause()
    // videoPlayer.dispose()
    videoPlayer.reset()
    setTimeout(() => {
      videoPlayer.src([
        {
          src: props.src,
          // type: "application/x-mpegURL"  //type可以不写，一旦写了一定要符合否则报错
        }
      ])
      videoPlayer.load()
      videoPlayer.play()
    }, 10)
  }
})

局部引入的点击事件：

const changePlayer = (id) => {
    console.log('ddd>>>', id, typeof id);
    //2.如何获取到多个播放器中的一个？
    data.currentPlayerId = id
}


const handleNodeClick = (treeNode, node) => {
    if (node.level !== 1) {
        if (data.cruentIndex !== 0) {
            data.videoUrlData[data.currentPlayerId].url = treeNode.url   //变data，变视频
        } else {
            data.videoUrlData[0].url = treeNode.url
        }
    } else {
        console.log('高亮在根元素>>>');
    }
}