video.js 和 Vue集成

这是一个基本的 VUE 播放器实现。

它只是在 mounted 上实例化 video.js 播放器，并在 beforeDestroy 上销毁它。

1. 安装依赖

npm install --save-dev video.js

2.在main.js 引用css

import 'video.js/dist/video-js.css'

3.创建 VideoPlayer组件

<template>
  <div>
    <video ref="videoPlayer" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9"></video>
  </div>
</template>

<script>
import videojs from 'video.js'

export default {
  name: 'VideoPlayer',
  props: {
    options: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      player: null
    }
  },
  mounted() {
    let that = this
    this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
      this.play()
      this.on('error', function(err) { //请求数据时遇到错误
        console.log('请求数据时遇到错误', err)
        that.$message.error('获取视频资源失败，请联系管理员上传视频')
      })
      this.on('stalled', function(stalled) { //网速失速
        console.log('网速失速', stalled)
        that.$message.warning('网速失速')
      })
    })
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose()
    }
  }
}
</script>
<style lang="scss">
.video-js { /* 给.video-js设置字体大小以统一各浏览器样式表现，因为video.js采用的是em单位 */

  font-size: 14px;

}

.video-js button {

  outline: none;

}

.video-js.vjs-fluid,
.video-js.vjs-16-9,
.video-js.vjs-4-3 { /* 视频占满容器高度 */

  height: 100%;

  background-color: #161616;

}

.vjs-poster {

  background-color: #161616;

}

.video-js .vjs-big-play-button { /* 中间大的播放按钮 */

  font-size: 2.5em;

  line-height: 2.3em;

  height: 2.5em;

  width: 2.5em;

  -webkit-border-radius: 2.5em;

  -moz-border-radius: 2.5em;

  //border-radius: 2.5em;

  background-color: rgba(115, 133, 159, .5);

  border-width: 0.12em;

  margin-top: -1.25em;

  margin-left: -1.75em;

}

.video-js.vjs-paused .vjs-big-play-button { /* 视频暂停时显示播放按钮 */

  display: block;

}

.video-js.vjs-error .vjs-big-play-button { /* 视频加载出错时隐藏播放按钮 */

  display: none;

}

.vjs-loading-spinner { /* 加载圆圈 */

  font-size: 2.5em;

  width: 2em;

  height: 2em;

  border-radius: 1em;

  margin-top: -1em;

  margin-left: -1.5em;

}

.video-js .vjs-control-bar { /* 控制条默认显示 */

  display: flex;

}

.video-js .vjs-time-control {
  display: block;
}

.video-js .vjs-time-divider {
  display: none;
}

.vjs-button > .vjs-icon-placeholder:before { /* 控制条所有图标，图标字体大小最好使用px单位，如果使用em，各浏览器表现可能会不大一样 */

  font-size: 22px;

  line-height: 1.9;

}

.video-js .vjs-playback-rate .vjs-playback-rate-value {

  line-height: 2.4;

  font-size: 14px;

}

/* 进度条背景色 */

.video-js .vjs-play-progress {

  color: #ffb845;

  background-color: #ffb845;

}

.video-js .vjs-progress-control .vjs-mouse-display {

  background-color: #ffb845;

}

.vjs-mouse-display .vjs-time-tooltip {

  padding-bottom: 6px;

  background-color: #ffb845;

}

.video-js .vjs-play-progress .vjs-time-tooltip {

  display: none !important;

}

.video-js {
  // 进度条的圆点式样跳转
  .vjs-play-progress:before {
    top: -0.45em !important;
  }

  .vjs-progress-control:hover .vjs-play-progress:before, {
    top: -0.33em !important;
  }
}
// 声音的圆点式样调整
.vjs-slider-vertical .vjs-volume-level:before {
  left: -4.5px !important;
}
</style>

4.使用

 <video-player ref="videoPlayer" v-if="videoVisible" :options="videoOptions"/>

videoVisible : false,
videoOptions: {
        autoplay: true,
        controls: true,
        playbackRates: [1, 1.25, 1.5, 2, 2.5],
        sources: [
          {
            src: '/path/to/video.mp4',
            type: 'video/mp4'
          }
        ],
        controlBar: {
          // 设置控制条组件
          currentTimeDisplay: true,
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: true,
          playbackRateMenuButton: true,
          volumePanel: {
            inline: false
          },
          children: [
            { name: 'playToggle' }, // 播放/暂停按钮
            { name: 'currentTimeDisplay' }, // 视频当前已播放时间
            { name: 'progressControl' }, // 播放进度条
            { name: 'durationDisplay' }, // 视频播放总时间
            {
              // 倍速播放
              name: 'playbackRateMenuButton',
              playbackRates: [0.5, 1, 1.5, 2]
            },
            {
              name: 'volumePanel', // 音量控制
              inline: false // 不使用水平方式
            },
            { name: 'FullscreenToggle' } // 全屏
          ]
        }
      },

播放和切换视频

handlePaly(obj, node) {
      this.obj = obj
      this.node = node
      if (!obj.children && node.level !== 1) {
        let data = {
          src: process.env.VUE_APP_BASE_API + this.tepmItem
        }
        if (this.videoVisible) {
          this.$refs.videoPlayer.player.src(data)
          return
        } else {
          this.videoOptions.sources[0] = data
        }
       this.videoVisible = true
      }
    },

参考：https://gitcode.gitcode.host/docs-cn/video.js-docs-cn/docs/guides/vue.html