VideoJS使用同一个组件播放不同视频时，播放的是上一次打开的视频，直接使用refs修改其src可以解决。

一.问题初探

一开始遇到这个问题去搜索，会发现有一种解决方案是要使用v-html搭配video.js的api创建视频播放player，切换不同视频时需要调用video.js的dispose方法把这个播放器实例销毁，之后再重新生成，经尝试是可以解决问题的。

参考文档：

vue+videojs通过dialog弹窗播放M3U8视频流（解决关闭弹窗后继续抓取视频流问题）_videojs m3u8 销毁后继续请求-优快云博客

vue中使用videojs，关闭窗口后视频流一直刷新问题，切换视频流问题_video 页面离开时候@timeupdate还在播放-优快云博客

流程如下：

首先，使用v-html给video.js的player占据一个位置

然后，创建的时候把videoHtml赋值，并调用video.js的api创建player

最后，在需要移除对象的地方加入dispose()方法

二.情况不同

由于使用v-html的方法有一个问题，好像是v-html中的class无法调用到我们自己写的类名及样式（也可能是我没找对方法），导致我们只能在v-html中写好样式，在v-html中设置style="width:100%;height:100%"的时候好像会导致小窗播放时是一横线，全屏播放正常，但是如果设置具体的px值为宽高，就会导致全屏时视频大小不变，所以还是要先写成<video></video>这种标签，而放弃v-html。

流程如下：

先把video标签写好，修改src，这里不能只修改videoSrc，否则还是会出现播放的是上一次的视频的问题，经过一番尝试，发现使用ref调用直接修改其src可以避免这个问题。

三.番外

遇到这个问题的时候虽然发现关闭视频播放弹窗之后，视频流仍然在请求当中，但是直接修改src的方法其实好像并没有阻止这一行为，推测可能是只修改this.videoSrc传递给<video>标签还需要触发一系列其他的组件自身封装的方法才能修改到ref中的src。

另外，在观察F12开发者工具时，发现在application->frames->media中有缓存的视频文件，我想可以直接清理这个缓存的视频，但是没找到方法。