解决 使用video.js封装video 多视频源时 改变sources的src无效的问题

解决 使用video.js封装video 多视频源时 改变sources的src无效的问题

video-player 组件

<template>
  <div>
    <video ref="videoPlayer" class="video-js"></video>
  </div>
</template>

<script>
import 'video.js/dist/video-js.css';
import videojs from 'video.js';
export default {
  name: "video-player",
  props: {
    options: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      player: null
    }
  },
  methods: {
    show(data) {
      this.player.src(data)
    }
  },
  mounted() {
    this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
      console.log('onPlayerReady', this);
    })
  },
  beforeDestroy() {
    console.log('beforeDestroy')
    if (this.player) {
      this.player.dispose()
    }
  }
}
</script>

<style scoped>
</style>

需要播放视频的页面

      <el-dialog :visible.sync="show_video">
        <div class="video-box">
          <div class="video">
            <video-player :options="videoOptions" class="video-css" ref="video" />
          </div>
        </div>
      </el-dialog>

      //  data
      videoOptions: {
        controls: true,//开启交互，即是用户可控。
        muted: true,//开启视频时是否静音
        fluid: true,//根据外层css样式大小，自动填充宽高！比较实用，可搭配响应式
        reload: "auto",//重载
        //其余设置根据需求添加！
        poster: '',//视频封面
        sources: [//视频播放源，建议本地
          {
            src: '',
            type: "video/mp4"
          },
        ]
      }

        // methods
        this.show_video = true
        // 必须调用this.player.src 方法 多视频源时只改变sources的src无效
        this.videoOptions.sources[0].src = 'xxx.mp4'    // 你的视频源
        this.$refs.video.show('xxx.mp4')