[VUE]页面视频播放使用vue-video-player记录

1.在项目根目录main.js 引入vue-video-player

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

2.在页面中直接引入

 <el-form-item label="视频">
      <div class='demo'>
            <video-player class="video-player vjs-custom-skin"
                          ref="videoPlayer"
                          :playsinline="true"
                          @pause="pausePlay($event)" //控制暂停
                          :options="playerOptions">
            </video-player>
        </div>
   </el-form-item>

// data:
 playerOptions: {
          //播放速度
           playbackRates: [0.5, 1.0, 1.5, 2.0],
           //如果true,浏览器准备好时开始回放。
           autoplay: false,
           // 默认情况下将会消除任何音频。
           muted: false,
           // 导致视频一结束就重新开始。
           loop: false,
           // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
           preload: 'auto',
           language: 'zh-CN',
           // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
           aspectRatio: '16:9',
           // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
           fluid: true,
           sources: [{
               //类型
               type: "video/mp4",
               //url地址
               src: ''
           }],
           //你的封面地址
           poster: '',
           //允许覆盖Video.js无法播放媒体源时显示的默认信息。
           notSupportedMessage: '此视频暂无法播放，请稍后再试',
           controlBar: {
               timeDivider: true,
               durationDisplay: true,
               remainingTimeDisplay: false,
               //全屏按钮
               fullscreenToggle: true
           },
}

// method
 pausePlay(player) { //关闭弹窗-停止播放
      this.player.pause();
     },
     //显示编辑界面
     handleEdit: function (index, row) {
         this.editFormVisible = true;
         this.editForm = Object.assign({}, row);
         // 设置视频src
         if (this.$refs.videoPlayer === undefined) {
            this.playerOptions.sources[0]={
             type: "video/mp4",
             src: row.video
             }
         }else {
         	// 防止页面重复打开会播放同一个视频||暂时替代方案
             let palyer = this.$refs.videoPlayer.player;
             palyer.src(row.video);
         }

     }
     
   // computed: 
   {
       player() {
           return this.$refs.videoPlayer.player
       }
   }

3.成品截图gif