vue-video-player 组件的使用 video.js 配置与方法详情 文档

vue-video-player 组件的使用

安装

cnpm i vue-video-player --save

示例

<template>
  <div>
    <vue-video-player
      class="video-player-box"
      ref="videoPlayer"
      :options="playerOptions"
      :playsinline="true"
      customEventName="customstatechangedeventname"
      @play="onPlayerPlay"
      @pause="onPlayerPause"
      @ended="onPlayerEnded"
      @waiting="onPlayerWaiting"
      @playing="onPlayerPlaying"
      @loadeddata="onPlayerLoadeddata"
      @timeupdate="onPlayerTimeupdate"
      @canplay="onPlayerCanplay"
      @canplaythrough="onPlayerCanplaythrough"
      @statechanged="playerStateChanged"
      @ready="playerReadied"
    >
    </vue-video-player>
  </div>
</template>
<!-- 
    // 视频格式
    type："video/webm"   // 可以播放，用ogg也可打开
    type："video/ogg"    // 可以播放，用webm也可打开
    type："video/3gp"    // 可以播放
    type："video/mp4"    // 可以播放
    type："video/avi"    // 打不开 无法播放
    type："video/flv"    // 打不开 可以使用flvjs代替
    type："video/mkv"    // 打不开 使用video/mp4可以播放
    type："video/mov"    // 打不开 使用video/mp4可以播放
    type："video/mpg"    // 打不开 未测试
    type："video/swf"    // 打不开  未测试
    type："video/ts"     // 打不开 未测试
    type："video/wmv"    // 打不开 未测试
    type："video/vob"    // 没转化 未测试
    type："video/mxf"    // 转化出错 未测试
    type: "video/rm"     // 转化出错 未测试
    // 组件方法
    重置进度条
    this.player.src(src)
    加载视频
    this.player.load();
    播放视频
    this.player.play();
    暂停播放
    this.player.pause();
    直接全屏 如果当前设备支持的话
    this.player.requestFullscreen();
    在全屏模式下，将视频恢复到正常大小
    this.player.exitFullscreen();
    当环境不支持全屏时 则扩展铺满容器
    this.player.enterFullWindow();
    重置播放器
    this.player.reset();
    返回当前播放源信息
    this.player.currentSources();
    获取或者设置预加载属性
    this.player.preload(val);
    播放控件是否显示
    this.player.controls(false);
    /* 父组件可以通过获取当前组件的 player 来调用 videoPlayer 组件的方法 */
 -->
<script>
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
export default {
  components: {
    VueVideoPlayer: videoPlayer
  },
  data() {
    return {
      playerOptions: {
        // videojs options
        // 是否等浏览器准备好后自动播放
        autoplay: true,
        // 是否静音
        muted: true,
        // 结束后是否重新开始
        loop: false,
        // 语言
        language: 'en',
        // 播放速度可选列表
        playbackRates: [],
        // 播放视频源
        sources: [
          {
            type: 'video/mp4',
            src: '/flv/diaosi.mov'
          }
        ],
        // 视频比例
        // aspectRatio: '4:3',
        //  为 true 时, 播放器具有流畅的大小
        fluid: true,
        // 封面
        // poster: '/static/images/author.jpg'
        controlBar: {
          //当前时间和持续时间的分隔符
          timeDivider: true,
          //显示持续时间
          durationDisplay: true,
          //是否显示剩余时间功能
          remainingTimeDisplay: false,
          //全屏按钮
          fullscreenToggle: true,
          //播放暂停按钮
          playToggle: true,
          //音量控制
          volumeMenuButton: false,
          //当前播放时间
          currentTimeDisplay: true,
          //点播流时，播放进度条，seek控制
          progressControl: true,
          //直播流时，显示LIVE
          liveDisplay: true,
          //播放速率，当前只有html5模式下才支持设置播放速率
          playbackRateMenuButton: false
        }
      }
    }
  },
  mounted() {
    console.log('this is current player instance object', this.player)
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player
    }
  },
  methods: {
    // 播放(播放时会调用)(用户操作调用)
    onPlayerPlay(player) {
      console.log('播放', player)
      this.$emit('onPlayerPlay', player)
    },
    // 暂停(暂停时调用)(用户操作调用)
    onPlayerPause(player) {
      console.log('暂停', player)
      this.$emit('onPlayerPause', player)
    },
    // 播放状态改变回调
    playerStateChanged(playerCurrentState) {
      console.log('数据变化', playerCurrentState)
      this.$emit('playerStateChanged', playerCurrentState)
    },
    // 准备就绪(预加载前会调用)(初始化调用)将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数
    playerReadied(player) {
      console.log('准备就绪', player)
      this.$emit('playerReadied', player)
    },
    // 结束(视频播放完毕调用)
    onPlayerEnded(player) {
      console.log('结束', player)
      this.$emit('onPlayerEnded', player)
    },
    // 等待(视频中出现loading就会调用,加载时调用)(高频调用)
    onPlayerWaiting(player) {
      console.log('等待', player)
      this.$emit('onPlayerWaiting', player)
    },
    // 播放中(进入播放状态会调用)(等待onPlayerWaiting和播放onPlayerPlay执行后会调用)(高频调用)
    onPlayerPlaying(player) {
      console.log('播放中', player)
      this.$emit('onPlayerPlaying', player)
    },
    // 当播放器在当前播放位置下载数据时触发
    onPlayerLoadeddata(player) {
      console.log('预加载', player)
      this.$emit('onPlayerLoadeddata', player)
    },
    // 进度更新(当前播放位置发生变化时触发)(视频接收到新内容会一直调用)(高频调用)
    onPlayerTimeupdate(player) {
      console.log('进度更新', player)
      this.$emit('onPlayerTimeupdate', player)
    },
    // 媒体的readyState为HAVE_FUTURE_DATA或更高(预加载onPlayerLoadeddata调用后会调用)(初始化调用)
    onPlayerCanplay(player) {
      console.log('是否播放', player)
      this.$emit('onPlayerCanplay', player)
    },
    // 能够从头到尾播放(是否播放onPlayerCanplay调用后会调用)(初始化调用)这意味着可以在不缓冲的情况下播放整个媒体文件
    onPlayerCanplaythrough(player) {
      console.log('能够从头到尾播放', player)
      this.$emit('onPlayerCanplaythrough', player)
    }
  }
}
</script>