每天学习一个vue插件(16)——vue-video-player

七秒记忆的鱼
6,445 阅读2分钟

今后还会不断地栽跟头，但同时你也有了每次站起来的坚强

前言

image.png

1 介绍

常用属性 props

playerOptions

// 视频配置项
{
  autoplay: true,
  muted: true,
  preload: 'auto',
  language: 'en',
  // 屏幕自适应
  fluid: true,
  // 倍速
  playbackRates: [0.7, 1.0, 1.5, 2.0],
  // 视频
  sources: [
    {
      type: 'video/mp4',
      src:
        'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm'
    }
  ],
  // 封面
  poster: 'https://t7.baidu.com/it/u=602106375,407124525&fm=193&f=GIF',
  notSupportedMessage: '此视频暂无法播放，请稍后再试',
  // 控制界面
  controlBar: {
    // 剩余时间
    remainingTimeDisplay: false,
    // 全屏按钮
    fullscreenToggle: true,
     // 当前时间
    currentTimeDisplay: true,
    // 声音控制键
    volumeControl: false,
    // 暂停和播放键
    playToggle: true, 
    // 进度条
    progressControl: true 
  }
}

常用事件 event

ready

// 加载完成
@ready="ready"

canplay

// 可以播放
// 此时可以回去视频时长
@canplay="canplay"

play

// 播放
@play="play"

pause

// 暂停
@pause="pause"

样式改造 style

video-player

<style lang="scss" scoped>
/deep/ .video-player {
  // 设置 fluid: true，宽高自适应
  // 默认  1024 * 576
  // .vjs_video_3-dimensions {
  //   width: 1024px;
  //   height: 576px;
  // }

  // 初始化，暂停按钮居中
  .vjs-big-play-button {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>

2 使用

安装

npm install vue-video-player  --save

加载样式

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

export default {
  components: {
    videoPlayer
  }
}

视频播放

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

<script>
// require styles
import 'video.js/dist/video-js.css'

import { videoPlayer } from 'vue-video-player'

export default {
  components: {
    videoPlayer
  },
  data() {
    return {
      // [配置信息](https://blog.csdn.net/qq_39905409/article/details/98481735)
      playerOptions: {
        // videojs options
        autoplay: true,
        muted: false,
        preload: 'auto',
        language: 'en',
        fluid: true,
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [
          {
            type: 'video/mp4',
            src:
              'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm'
          }
        ],
        poster: 'https://t7.baidu.com/it/u=602106375,407124525&fm=193&f=GIF',
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, // 全屏按钮
          currentTimeDisplay: true, // 当前时间
          volumeControl: false, // 声音控制键
          playToggle: true, // 暂停和播放键
          progressControl: true // 进度条
        }
      }
    }
  },
  mounted() {
    console.log('this is current player instance object', this.player)
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player
    }
  },
  methods: {
    // listen event
    onPlayerPlay(player) {
      console.log('player play!', player)
    },
    onPlayerPause(player) {
      console.log('player pause!', player)
    },
    onPlayerEnded(player) {
      console.log('player onPlayerEnded!', player)
    },
    onPlayerWaiting(player) {
      console.log('player onPlayerWaiting!', player)
    },
    onPlayerPlaying(player) {
      console.log('player onPlayerPlaying!', player)
    },
    onPlayerLoadeddata(player) {
      console.log('player onPlayerLoadeddata!', player)
    },
    onPlayerTimeupdate(player) {
      console.log('player onPlayerTimeupdate!', player)
    },
    onPlayerCanplay(player) {
      console.log('player onPlayerCanplay!', player)
    },
    onPlayerCanplaythrough(player) {
      console.log('player onPlayerCanplaythrough!', player)
    },
    // ...player event

    // or listen state event
    playerStateChanged(playerCurrentState) {
      console.log('player current update state', playerCurrentState)
    },

    // player is ready
    playerReadied(player) {
      console.log('the player is readied', player)
      // you can use it to do something...
      // player.[methods]
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .video-player {
  // 设置 fluid: true，宽高自适应
  // 默认  1024 * 576
  // .vjs_video_3-dimensions {
  //   width: 1024px;
  //   height: 576px;
  // }

  // 初始化，暂停按钮居中
  .vjs-big-play-button {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>

3.注意

1.配置fluid，自适应宽高
2.配置playsinline，内联播放，解决IOS不自动播放问题

尾声

别怕，别怕，我在呢，都会好起来的啦~

晚安 ^_^

参考链接

往期回顾

avatar
文章
阅读
粉丝