安装

npm install vue-video-player --save 

引入组件

import Vue from 'vue'
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'

注册组件

  components: {
    videoPlayer
  },

使用

template

            <video-player  class="video-player-box"
                ref="videoPlayer"
                :options="playerOptions"
                :playsinline="true"
                customEventName="customstatechangedeventname"
            @play="onPlayerPlay($event)"
            @pause="onPlayerPause($event)"
            @ended="onPlayerEnded($event)"
            @loadeddata="onPlayerLoadeddata($event)"
            @waiting="onPlayerWaiting($event)"
            @playing="onPlayerPlaying($event)"
            @timeupdate="onPlayerTimeupdate($event)"
            @canplay="onPlayerCanplay($event)"
            @canplaythrough="onPlayerCanplaythrough($event)"
            @ready="playerReadied"
            @statechanged="playerStateChanged($event)">
            </video-player>

data

      playerOptions: {
        muted: true,
        language: 'en',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        aspectRatio: '16:9',
        preload: 'auto',
        sources: [{
          type: "video/mp4",
          src: "http://aws-cdn.wshareit.com/sz2/dev/v5/210701/vO1f3/o22218.mp4"
        }],
        // poster: "/static/images/author.jpg",
        notSupportedMessage: '此视频暂无法播放，请稍后再试', 
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        }
      }

methods

          methods: {
            //监听播放
            onPlayerPlay (player) {
                console.log(player);
                // this.$refs.videoPlayer.player.play();
            },
            //监听暂停
            onPlayerPause (player) {
                console.log(player);
                // this.$refs.videoPlayer.player.pause();
            },
            //监听播放状态改变
            playerStateChanged (player) {
                // console.log(player);
            },
            //监听媒体是否已到达结尾，播放完
            onPlayerEnded (player) {
                // console.log(player);
            },
            //DOM元素上的readyState更改导致播放停止。
            onPlayerWaiting (player) {
                // console.log(player);
            },
            //媒体不再被禁止播放，并且已开始播放。
            onPlayerPlaying (player) {
                // console.log(player);
            },
            //当播放器在当前播放位置下载数据时触发
            onPlayerLoadeddata (player) {
                // console.log(player);
            },
            //当前播放位置发生变化时触发。
            onPlayerTimeupdate (player) {
                // console.log(player);
            },
            //媒体的readyState为HAVE_FUTURE_DATA或更高
            onPlayerCanplay(player) {
                // console.log('player Canplay!', player)
            },
            //媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
            onPlayerCanplaythrough(player) {
                // console.log('player Canplaythrough!', player)
            },
            //将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。
            playerReadied(player) {
                // seek to 10s
                console.log('example player 1 readied', player);
                // player.currentTime(0)
                // console.log('example 01: the player is readied', player)
            }
          }

其他

进度操作

保存进度

//保存进度
    onPlayerTimeupdate(player) {
      // console.log('--onPlayerTimeupdate--', player.cache_.currentTime)
      this.timer_video = setTimeout(() => {
        this.learnSchedule = player.cache_.currentTime
      }, 3000);
    },

恢复进度

//恢复进度
    playerReadied(player) {
      console.log('----playerReadied----', this.learnSchedule)
      player.currentTime(this.learnSchedule)
    }