Vue使用视频组件 vue-video-player

一、安装

npm install vue-video-player --save-dev
//可选安装
videojs-flash  //rtmp
videojs-contrib-hls  //播放m3u8库

二、引入

全局引入 main.js

import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)

三、使用

DOM

    <video-player
        class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :options="playerOptions"
        @play="onPlayerPlay($event)"   //播放时执行
        @pause="onPlayerPause($event)" //暂停时
        @ended="onPlayerEnded($event)" //视频播完
        @waiting="onPlayerWaiting($event)"  //DOM元素上的readyState更改导致播放停止
        @playing="onPlayerPlaying($event)"  //已开始播放
        @loadeddata="onPlayerLoadeddata($event)" //播放位置加载数据时
        @timeupdate="onPlayerTimeupdate($event)" //播放位置发生变化时
        @statechanged="playerStateChanged($event)"//播放状态改变时
        @ready="playerReadied" //ready事件后触发
    ></video-player>

JS

playerOptions: {
  playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
  autoplay: false, // 如果为true,浏览器准备好时开始回放。
  muted: false, // 默认情况下将会消除任何音频。
  loop: false, // 是否视频一结束就重新开始。
  preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
  language: "zh-CN",
  aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
  fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
  sources: [
    {
      type: "video/mp4", // 类型
      src: "", // url地址
    },
  ],
  poster: "", // 封面地址
  notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
  controlBar: {
    timeDivider: true, // 当前时间和持续时间的分隔符
    durationDisplay: true, // 时长显示
    remainingTimeDisplay: true, // 剩下时间
    currentTimeDisplay: true, // 当前时间
    volumeControl: true, // 声音控制键
    playToggle: true, // 暂停和播放键
    progressControl: true, // 进度条
    fullscreenToggle: true, // 全屏按钮
  },
},

四、常用

this.$refs.videoPlayer.player.play() // 播放
this.$refs.videoPlayer.player.pause() // 暂停
this.$refs.videoPlayer.player.src(src) // 重置进度条复制代码



onPlayerTimeupdate(player) {
    player.cache_.currentTime //当前时间
    player.cache_.duration //总时间
    player.currentTime(0) //设置播放时间位置
    this.$refs.videoPlayer.player.src(videourl); // 更改播放视频
    player.player()?.isFullscreen_ //当前是否在全屏状态
},

原参考链接：vue-video-player视频播放器使用总结 - 简书