vue中使用video-js預覽視頻（結合vuetify）

后台管理中經常會有一些視頻上傳的需求，在列表中，往往需要用到視頻預覽

1：安裝

yarn  add vue-video-player

2：引用：在main.js中引用

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

3：使用（結合你使用框架的dialog即對話框，我使用的是vuetify中的遮罩層，效果一致，便沒有使用dialog）

  <v-overlay :absolute="false" :value="videoModal">----點擊預覽按鈕后的彈框
      <v-icon
        @click="videoModal=false" 
        style="font-size:30px;position: absolute;top:-15px;right:-15px;z-index:2;cursor:pointer;"
      >mdi-close-circle-outline</v-icon>-----------點擊關閉按鈕關閉遮罩層
      <div class="input_video">
        <video-player
          class="video-player vjs-custom-skin"
          ref="videoPlayer"
          :playsinline="true"
          :options="playerOptions"--------設置視頻播放的對象
        ></video-player>
      </div>
    </v-overlay>

　　

 playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0],//倍速控制
        autoplay: true,//是否自動播放
        muted: false,//是否靜音播放
        loop: false,//是否循環播放
        preload: "auto",
        language: "zh-CN",
        aspectRatio: "16:9",//比例
        fluid: true,
        sources: [
          {
            type: "",
            src:
              "https://blz-videos.nosdn.127.net/1/OverWatch/OVR_D.VA_SHOOTING_STAR_zhCN_YT_PC_3.mp4", //url地址
          },
        ],
        poster: "", //你的封面地址
        notSupportedMessage: "此視頻暫無法播放，請稍后再試",
        controlBar: {
          timeDivider: true,
          durationDisplay: true,//剩余時間是否顯示
          remainingTimeDisplay: true,//剩余時間是否顯示，有一個即可
          fullscreenToggle: true,//全屏按鈕
        },
      },