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

忘是亡心i 2022-12-10 14:48 133阅读 0赞

## 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 ##

![在这里插入图片描述][20200926224459714.gif_pic_center]

[20200926224459714.gif_pic_center]: /images/20221123/d3a636e1c98748a7add9957ca63d5e37.png