image.png

這里使用了一個(gè)用videojs封裝的vue組件https://github.com/surmon-china/vue-video-player

1. 安裝注冊(cè)

npm install vue-video-player --save

import VueVideoPlayer from 'vue-video-player'

// 引入基本樣式 因?yàn)槲蚁胫苯有薷臉邮?所以復(fù)制出來(lái)自己引入 當(dāng)然也可以引入他的然后復(fù)寫(xiě)
import '@/assets/css/video-js.css';

Vue.use(VueVideoPlayer, /* {
  options: global default options,
  events: global videojs events
} */)

2. 使用

這里主要需要兩個(gè)功能，一個(gè)是播放，另一個(gè)就是動(dòng)態(tài)加載不同的視頻。
主要代碼如下

<div class="image-view-model" v-show="showModel">
  <i class="ui-mask" @click="() => {
      showModel = false;
      player.pause(); // 暫停
    }"></i>
    <div class="player">
      <video-player  class="video-player-box"
        ref="videoPlayer"
        :options="playerOptions"
        :playsinline="true"
        customEventName="customstatechangedeventname"
      >
      </video-player>
    </div>
  </div>

export default {
  data() {
    return {
      playerOptions: {
      muted: true,
      language: 'zh-CN',
      playbackRates: [0.7, 1.0, 1.5, 2.0],
      sources: [{
        type: 'video/mp4',
        src: 'http://192.168.201.188:8000/demo-video.mp4',
      }],
    },
  computed: {
    player() {
      return this.$refs.videoPlayer.player;
    },
  },

如何動(dòng)態(tài)切換視頻源

// 直接通過(guò)動(dòng)態(tài)修改 playerOptions.sources[0]就可以了
playerOptions.sources[0].src = item