Vue 视频播放插件vue-video-player

安装

npm install vue-video-player --save

引入

可以全局引入插件，也可以在需要用到该插件的组件内单独引入（二选一）

【1】全局引用， 在main.js里面导入并引用

import VideoPlayer from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
 
Vue.use(VideoPlayer)

【2】组件内引用

import {
   
    videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'

export default {
   
   
  components: {
   
   
    videoPlayer
  }
}

使用

【1】html部分

  <template>
    <div class='demo'>
      <video-player class="video-player vjs-custom-skin" 
            ref="videoPlayer" 
            :playsinline="true" 
            :options="playerOptions">
      </video-player>
    </div>
  </template>

【2】js部分

    export default {
   
   
      data()