vue 视频播放器 vue-video-player

1. 安装依赖

npm install vue-video-player --save
//或

yarn add vue-video-player

2. 导入注册

// 全局注册 在main.js入口文件中引入
import { videoPlayer } from 'vue-video-player';
import 'video.js/dist/video-js.css';
Vue.use(VideoPlayer)

//按需引入

import { videoPlayer } from 'vue-video-player';
import 'video.js/dist/video-js.css';
components:{
    videoPlayer
 },

3. 页面

<video-player
    v-if="playerOptions.sources[0].src"
    class="video-player-box"
    ref="videoPlayer"
    :options="playerOptions"
    :playsinline="true"
    customEventName="customstatechangedeventname"
    @play="onPlayerPlay($event)"
    @pause="onPlayerPause($event)"
    @ready="playerReadied"
    @ended="onPlayerEnded($event)"
    @timeupdate="onPlayerTimeupdate($event)"
  >
  </video-player>

4. 配置

data () {
    return {
      playerOptions: {
          width: '980',
          muted: false,
          preload: 'auto',
          aspectRatio: '16:9',
          language: 'zh-CN',
          playbackRates: [0.7, 1.0, 1.5, 2.0],
          notSupportedMessage: '此视频暂无法播放，请稍后再试',
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: true,
          },
          sources: [
            {
              type: 'video/mp4',
              src: "https://soft.onlinedo.cn/static/template/28/images/gif_m.mp4",
            },
          ],
          poster: '',
        },
        isPlaying: false,
        hidePause: false,
        loading: true,
        durations: 0,
        videoSumTime: 0,
    }
  },

5. 方法

onPlayerPlay() {
        // console.log('player play!', player);
        // if (this.count < 1) this.player.volume(0.5);
        this.isPlaying = true;
        this.count++;
      },
      onPlayerPause() {
        // console.log('player pause!', player);
        this.isPlaying = false;
      },
      // or listen state event
      playerStateChanged() {
        // console.log('player current update state', playerCurrentState);
      },
      // player is ready
      playerReadied() {
        // console.log('the player is readied', player);
        // you can use it to do something...
        // player.currentTime(10);
      },
      onPlayerEnded() {
        // console.log('the player is ended');
      },
      // 当前播放进度
      onPlayerTimeupdate (player) {
            this.durations = player.cache_.currentTime //当前播放时长
            this.videoSumTime = parseInt(player.cache_.duration); //视频总时长
            console.log(this.durations);
            // console.log(' onPlayerTimeupdate!', player)
      },
      // 控制暂停播放
      handlePause() {
        this.player.pause();
      },