前端h5 播放器vue-video-player

1.安装依赖
npm install vue-video-player
2.在main.js全局引入
import VideoPlayer from ‘vue-video-player’
import ‘video.js/dist/video-js.css’
import ‘vue-video-player/src/custom-theme.css’
3.在组件使用

<video-player ref="videoPlayer" :playsinline="true" :options="playerOptionsObj" @pause="onPlayerPause($event)" @play="onPlayerPlay($event)" v-if="['mp4', 'ogg', 'webm', 'swf', 'm3u8'].indexOf(type) > -1"></video-player>

定义

playerOptionsObj:{
         autoplay: false,
         muted: true,
         loop: false,
         preload: 'auto', 
         language: 'zh-CN',
         fluid: true,
         aspectRatio: '16:9',
         sources: [{
           src: '',  // 放链接  如在本地 需要rquire()
           type: 'video/mp4'    // 播放类型
         }],
         poster: '',  // 封面
         notSupportedMessage: '请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
         controlBar: {
           timeDivider: true,
           durationDisplay: true,
           remainingTimeDisplay: false,
           fullscreenToggle: true  //全屏按钮
        }
       },

方法

      onPlayerPlay (e) {
        // 监听开始播放
        console.log(e)
      },
      onPlayerPause(e) {
        this.$refs.videoPlayer.pause()
        // console.log( this.$refs.videoPlayer, "暂停播放");
      },