vue-video-player重载问题处理

版本

vue 2.6.10
vue-video-player 5.0.2
element ui 2.5.16

场景

公司业务需要，需要做成以下效果：

要求每个视频可以勾选，也可以点击全选选择全部视频。
页面通过el-checkbox-group+el-checkbox+video进行布局，通过循环数据源将复选框与视频进行绑定。
开发过程中发现，当勾选时，会导致页面全部视频资源进行重载。
查看vue-video-player源码中的视频资源加载方法，发现其中的watch方法是导致重载的原因

此处深度监听视频数据源options的改变，若改变，则重新加载。而当我们勾选复选框时，就会触发此方法，导致视频重载。

问题解决

针对此问题，根据当前业务场景，我这边将该方法做了优化，只有当改变前后的options中的sources不一致时才执行重载方法，否则不执行。

// vue-video-player
import { videoPlayer } from 'vue-video-player/src'
import 'vue-video-player/node_modules/video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
// 重写vue-video-player watch
const repeatVideo = function (videoPlayer) {
  videoPlayer.watch.options.handler = (options, old) => {
    if (JSON.stringify(old.sources) === JSON.stringify(options.sources)) return
    videoPlayer.methods.dispose(() => {
      if (options && options.sources && options.sources.length) {
        videoPlayer.methods.initialize()
      }
    })
  }
  return videoPlayer
}
// 重新注册
components: { VideoPlayer: repeatVideo(videoPlayer) },

其他问题记录

vue-video-player重置方法

this.$refs['videoPlayer'].player.src([this.sources]) // 重置

目前发现，当player.src（）接受一个数据对象时，mkv格式的视频会出现重置失败的问题，改为数组即可解决。