vue2 使用video.js

页面内使用

// 外层div
<div class="video-class" v-if="isShowVideoDialog">
  <!-- <video width="100%" height="100%" controls :src="playUrl"></video> -->
  <video
    ref="videoPlayerRef"
    class="video-js"
  >
    <source
      :src="playUrl"
      type="video/mp4"
    >
  </video>
</div>

// data内属性以及值
data () {
  return {
        videoPlayerOption: {
          controls: true, //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。 
          poster: '',//封面
          autoplay: false, //自动播放属性,
          muted: false, // 静音播放
          preload: 'auto', //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
          fluid: true
      }
  }
} 

// js 使用
import Videojs from 'video.js'
import 'video.js/dist/video-js.css'

this.$nextTick(() => {
  Videojs(
    this.$refs.videoPlayerRef,
    this.videoPlayerOption,
    function onPlayerReady() {
      console.log('onPlayerReady', this);
    });
}) 

封装组件

传送门：https://blog.csdn.net/qq_52050769/article/details/120057519