vue视频插件vue-video-player

vue-video-player 是基于video.js 二次封装而成，各种api基本互通，只是调用方式有些许区别

插件安装及引入

yarn add vue-video-player
或
npm install vue-video-player

如引入样式时报错，请自行查看node_modules中对应的目录

全部引入

// main.js 中
import VideoPlayer from 'vue-video-player'
// 引入默认样式包
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
Vue.use(VideoPlayer)

局部引入 略了

使用

以下列出的各种回调及api的调用，基本可以满足自定义播放器样式了

<!-- vue template中 -->
<video-player class="video-player ref="videoPlayer" :playsinline="true" :options="playerOptions" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)" @ended="onPlayerEnded($event)" @waiting="onPlayerWaiting($event)" @playing="onPlayerPlaying($event)" @loadeddata="onPlayerLoadeddata($event)" @timeupdate="onPlayerTimeupdate($event)" @statechanged="playerStateChanged($event)" @ready="playerReadied"></video-player>

// vue script 中
data () {
  return {
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 加载完成后是否自动播放
        muted: false, // 是否静音。
        loop: false, // 是否循环播放
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 宽高比例
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: '', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
          src: require('../assets/vido/vido3.mp4') // url地址
        }],
        poster: '', // 你的封面地址
        notSupportedMessage: '无法播放', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: false // 为false时不显示默认的控制按钮
      }
    }
  },
  methods: {
  	// -----------------------各种回调--------------------------
  	// 播放的回调
    onPlayerPlay (e) {
    },
    // 暂停的回调
    onPlayerPause (e) {
    },
    // 结束的回调
    onPlayerEnded (e) {
    },
    // 等待的回调
    onPlayerWaiting (e) {
    },
    // 播放中回调
    onPlayerPlaying (e) {
    },
   	// 视频加载完成的回调
    onPlayerLoadeddata (e) {
      // e.duration() 可获取视频的总时长
    },
    // 视频播放时，时间的回调
    onPlayerTimeupdate (e) {
      this.currentVolume = (e.volume() * 100).toFixed(2) * 1
    },
    // 视频播放时状态回调
    playerStateChanged (e) {
      // e.timeupdate 存在时视频正在播放中，e.timeupdate值为当前播放时间
      // e.pause 存在时视频为暂停状态
      // e.play 存在时视频为播放状态
    },
    // 视频加载完成回调，此时可以赋值 myPlayer
    playerReadied (e) {
      this.myPlayer = e
    },
    // -----------------------自定义的各种方法--------------------------
    // 静音或取消静音按钮
    mutedChange () {
      if (this.myPlayer) {
        if (this.myPlayer.muted()) {
          this.myPlayer.muted(false)
        } else {
          this.myPlayer.muted(true)
        }
        this.isMuted = this.myPlayer.muted()
      }
    },
    // 播放按钮
    doPlay () {
      this.myPlayer.play()
    },
    // 暂停按钮
    doPause () {
      this.myPlayer.pause()
    },
    // 重置视频按钮
    doRest () {
      this.myPlayer.src(require(`src`))
    },
    // 控制进度条按钮，入参单位为秒
    doProgress (val) {
      this.myPlayer.currentTime(val)
      this.doPlay()
    },
    // 全屏按钮
    fullScreenHandle () {
      if (!this.myPlayer.isFullscreen()) {
        this.myPlayer.requestFullscreen()
        this.myPlayer.isFullscreen(true)
      } else {
        this.myPlayer.exitFullscreen()
        this.myPlayer.isFullscreen(false)
      }
    },
    // 控制音量按钮，取值0-1
    doVol (val) {
      this.myPlayer.volume(val)
    }
  }