vue中视频播放

image.png

这里使用了一个用videojs封装的vue组件https://github.com/surmon-china/vue-video-player

1. 安装注册

npm install vue-video-player --save

import VueVideoPlayer from 'vue-video-player'

// 引入基本样式 因为我想直接修改样式 所以复制出来自己引入 当然也可以引入他的然后复写
import '@/assets/css/video-js.css';

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

2. 使用

这里主要需要两个功能，一个是播放，另一个就是动态加载不同的视频。
主要代码如下

<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;
    },
  },

如何动态切换视频源

// 直接通过动态修改 playerOptions.sources[0]就可以了
playerOptions.sources[0].src = item