Vue3使用vue-video-player组件

1.安装依赖（亲测5.0.1版本可用，最新版本会找不到'vue-video-player/src/custom-theme.css'这个样式）

yarn add  vue-video-player@5.0.1

2.main.js里增加以下代码

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

const app = createApp(App)
installElementPlus(app)
installIcons(app)
app.use(store).use(VideoPlayer).use(router).mount('#app')

3.增加一个组件Videoplayer

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

<script setup>
import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
const emits = defineEmits([
  'handleCurrentTime',
  'onPlayerPause',
  'onPlayerPlay',
  'playerStateChanged',
  'onPlayerEnded',
  'onPlayerWaiting',
  'onPlayerPlaying',
  'onPlayerLoadeddata',
  'onPlayerCanplay',
  'onPlayerCanplaythrough'
])
const videoPlayerRef = ref()
const playerOptions = ref({
  playbackRates: [0, 0.5, 1.0, 1.5, 2.0], // 可选的播放速度
  autoplay: false, // 如果为true,浏览器准备好时开始回放。
  muted: false, // 默认情况下将会消除任何音频。
  loop: false, // 是否视频一结束就重新开始。
  preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
  language: 'zh-CN', // zh-CN  需要main.js全局引入才可以生效
  aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
  fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
  sources: [
    {
      type: 'video/mp4', // 类型
      src: 'https://qkodo.playlistmusic.com.cn/transcode_1080/video/2dd0dd6bb83b71d16c6313d0411d26aa.mp4' // url地址https://qkodo.playlistmusic.com.cn/transcode_1080/video/2dd0dd6bb83b71d16c6313d0411d26aa.mp4
    }
  ],
  poster: '', // 封面地址
  notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
  controlBar: {
    // 当前时间和持续时间的分隔符
    timeDivider: true,
    // 显示持续时间
    durationDisplay: true,
    // 是否显示剩余时间功能
    remainingTimeDisplay: false,
    // 是否显示全屏按钮
    fullscreenToggle: true,
    // 播放暂停按钮
    playToggle: true,
    // 音量控制
    volumeMenuButton: false,
    // 当前播放时间
    currentTimeDisplay: true,
    // 点播流时，播放进度条，seek控制
    progressControl: true,
    // 直播流时，显示LIVE
    liveDisplay: true,
    // 播放速率，当前只有html5模式下才支持设置播放速率
    playbackRateMenuButton: true
  }
})

const currentTime = ref(0)
const playtimes = ref(7)
// 视频播放
const videoPlay = () => {
  videoPlayerRef.value.player.play()
}
// 视频暂停
const videoPause = () => {
  videoPlayerRef.value.player.pause()
}
// 视频静音
const videoMute = () => {
  videoPlayerRef.value.player.muted(true)
}
// 获取视频播放进度 进度更新(当前播放位置发生变化时触发)(视频接收到新内容会一直调用)(高频调用)
const onPlayerTimeupdate = (player) => {
  emits('handleCurrentTime', player.cache_.currentTime)
}
// 设置视频开始的进度 准备就绪(预加载前会调用)(初始化调用)
const playerReadied = (player) => {
  player.currentTime(currentTime.value)
}
// 暂停回调   将视频播放的时间保存  暂停回调(暂停时调用)(用户操作调用)
const onPlayerPause = (player) => {
  console.log('player pause currentTime!', player.cache_.currentTime)
  emits('onPlayerPause', player.cache_.currentTime)
}
// 播放回调(播放时会调用)(用户操作调用)
const onPlayerPlay = (player) => {
  emits('onPlayerPlay', player)
}
// 播放状态改变回调
const playerStateChanged = (playerCurrentState) => {
  console.log('数据变化', playerCurrentState)
  emits('playerStateChanged', playerCurrentState)
}
// 视频播完回调 (结束)(视频播放完毕调用)
const onPlayerEnded = (player) => {
  console.log('结束', player)
  emits('onPlayerEnded', player)
}
// 等待(视频中出现loading就会调用,加载时调用)(高频调用)
const onPlayerWaiting = (player) => {
  console.log('等待', player)
  emits('onPlayerWaiting', player)
}
// 播放中(进入播放状态会调用)(等待onPlayerWaiting和播放onPlayerPlay执行后会调用)(高频调用)
const onPlayerPlaying = (player) => {
  console.log('播放中', player)
  emits('onPlayerPlaying', player)
}
// 当播放器在当前播放位置下载数据时触发
const onPlayerLoadeddata = (player) => {
  console.log('预加载', player)
  emits('onPlayerLoadeddata', player)
}
// 媒体的readyState为HAVE_FUTURE_DATA或更高(预加载onPlayerLoadeddata调用后会调用)(初始化调用)
const onPlayerCanplay = (player) => {
  console.log('是否播放', player)
  emits('onPlayerCanplay', player)
}
// 能够从头到尾播放(是否播放onPlayerCanplay调用后会调用)(初始化调用)这意味着可以在不缓冲的情况下播放整个媒体文件
const onPlayerCanplaythrough = (player) => {
  console.log('能够从头到尾播放', player)
  emits('onPlayerCanplaythrough', player)
}
</script>

<style lang="scss" scoped>
.course_node_video {
  width: 100%;
  height: auto;
  margin: 0 auto;
  text-align: center;
  object-fit: fill;
}
::v-deep video {
  width: 100% !important;
  height: calc(100vh - 200px) !important;
  object-fit: fill;
}
</style>

4.其他页面调用：

<div class="video-box">
  <video-player
    @onPlayerPlay="onPlayerPlay"
    @onPlayerPause="onPlayerPause"
    @onPlayerEnded="onPlayerEnded"
    @handleCurrentTime="handleCurrentTime"
   ></video-player>
</div>

 https://blog.csdn.net/junx666/article/details/133879641

Vue中实现视频播放——vue-video-player、dplayer

https://blog.csdn.net/m0_46318298/article/details/132225776