vue中使用video-js预览视频

1：安装

cnpm i vue-video-player -S

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即对话框）

  <video-player
        class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        :options="playerOptions"--------设置视频播放的对象
      >
</video-player>

4、配置

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:
             "", //url地址
         },
       ],
       poster: "", //你的封面地址
       notSupportedMessage: "此视频暂无法播放，请稍后再试",
       controlBar: {
         timeDivider: true,
         durationDisplay: true,//剩余时间是否显示
         remainingTimeDisplay: false,//剩余时间是否显示，有一个即可
         fullscreenToggle: true,//全屏按钮
       },
     },