vue/cli 视频播放 vue-video-player

1、下载：
      npm install vue-video-player -S

      npm install video.js -S  // 先安装vue-video-player，如果报错再装video.js, 因为要依赖video.js

2、组件引入

    import { videoPlayer } from 'vue-video-player/src' // 注意这要到  /src
    import 'vue-video-player/src/custom-theme.css'
    import 'video.js/dist/video-js.css'

3、组件components中：

    components: {
        videoPlayer
     }

4、data中

      playerOptions: { // 视频常用设置
        muted: true, // 是否播放声音 true 不播放 false 播放
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 播放速度
        fluid:true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
       // poster:'' // 封面图，如果不自己传封面，则默认是视频中的图片
      },
    

5、页面

    <video-player  class="video-player vjs-custom-skin"
                  :options="{...playerOptions, sources:{type:'video/mp4', src: item.url}}" // 动态加载地址
         ></video-player>
    

6、其他设置

    参考video.js配置：https://docs.videojs.com/tutorial-options.html

 

7、注：在 antd modal弹窗 中使用的时候，会出现加载不出来的情况

    解决：给 modal 加 destroyOnClose 属性