vue中使用video-js预览视频（结合vuetify）

Posted 2020-12-19 冰晨之露

后台管理中经常会有一些视频上传的需求，在列表中，往往需要用到视频预览

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,//全屏按钮
        },
      },