Vue3使用vue-video-player组件

1 import VideoPlayer from 'vue-video-player/src'
2 import 'video.js/dist/video-js.css'
3 require('vue-video-player/src/custom-theme.css')
4 
5 const app = createApp(App)
6 installElementPlus(app)
7 installIcons(app)
8 app.use(store).use(VideoPlayer).use(router).mount('#app')

  1 <template>
  2   <div class="course_node_video">
  3     <video-player
  4       class="video-player vjs-custom-skin"
  5       ref="videoPlayerRef"
  6       :playsinline="true"
  7       :options="playerOptions"
  8       @ready="playerReadied"
  9       @pause="onPlayerPause($event)"
 10       @timeupdate="onPlayerTimeupdate($event)"
 11       customEventName="customstatechangedeventname"
 12       @play="onPlayerPlay"
 13       @ended="onPlayerEnded"
 14       @waiting="onPlayerWaiting"
 15       @playing="onPlayerPlaying"
 16       @loadeddata="onPlayerLoadeddata"
 17       @canplay="onPlayerCanplay"
 18       @canplaythrough="onPlayerCanplaythrough"
 19       @statechanged="playerStateChanged"
 20     >
 21     </video-player>
 22   </div>
 23 </template>
 24 
 25 <script setup>
 26 import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
 27 const emits = defineEmits([
 28   'handleCurrentTime',
 29   'onPlayerPause',
 30   'onPlayerPlay',
 31   'playerStateChanged',
 32   'onPlayerEnded',
 33   'onPlayerWaiting',
 34   'onPlayerPlaying',
 35   'onPlayerLoadeddata',
 36   'onPlayerCanplay',
 37   'onPlayerCanplaythrough'
 38 ])
 39 const videoPlayerRef = ref()
 40 const playerOptions = ref({
 41   playbackRates: [0, 0.5, 1.0, 1.5, 2.0], // 可选的播放速度
 42   autoplay: false, // 如果为true,浏览器准备好时开始回放。
 43   muted: false, // 默认情况下将会消除任何音频。
 44   loop: false, // 是否视频一结束就重新开始。
 45   preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
 46   language: 'zh-CN', // zh-CN  需要main.js全局引入才可以生效
 47   aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
 48   fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
 49   sources: [
 50     {
 51       type: 'video/mp4', // 类型
 52       src: 'https://qkodo.playlistmusic.com.cn/transcode_1080/video/2dd0dd6bb83b71d16c6313d0411d26aa.mp4' // url地址https://qkodo.playlistmusic.com.cn/transcode_1080/video/2dd0dd6bb83b71d16c6313d0411d26aa.mp4
 53     }
 54   ],
 55   poster: '', // 封面地址
 56   notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
 57   controlBar: {
 58     // 当前时间和持续时间的分隔符
 59     timeDivider: true,
 60     // 显示持续时间
 61     durationDisplay: true,
 62     // 是否显示剩余时间功能
 63     remainingTimeDisplay: false,
 64     // 是否显示全屏按钮
 65     fullscreenToggle: true,
 66     // 播放暂停按钮
 67     playToggle: true,
 68     // 音量控制
 69     volumeMenuButton: false,
 70     // 当前播放时间
 71     currentTimeDisplay: true,
 72     // 点播流时，播放进度条，seek控制
 73     progressControl: true,
 74     // 直播流时，显示LIVE
 75     liveDisplay: true,
 76     // 播放速率，当前只有html5模式下才支持设置播放速率
 77     playbackRateMenuButton: true
 78   }
 79 })
 80 
 81 const currentTime = ref(0)
 82 const playtimes = ref(7)
 83 // 视频播放
 84 const videoPlay = () => {
 85   videoPlayerRef.value.player.play()
 86 }
 87 // 视频暂停
 88 const videoPause = () => {
 89   videoPlayerRef.value.player.pause()
 90 }
 91 // 视频静音
 92 const videoMute = () => {
 93   videoPlayerRef.value.player.muted(true)
 94 }
 95 // 获取视频播放进度 进度更新(当前播放位置发生变化时触发)(视频接收到新内容会一直调用)(高频调用)
 96 const onPlayerTimeupdate = (player) => {
 97   emits('handleCurrentTime', player.cache_.currentTime)
 98 }
 99 // 设置视频开始的进度 准备就绪(预加载前会调用)(初始化调用)
100 const playerReadied = (player) => {
101   player.currentTime(currentTime.value)
102 }
103 // 暂停回调   将视频播放的时间保存  暂停回调(暂停时调用)(用户操作调用)
104 const onPlayerPause = (player) => {
105   console.log('player pause currentTime!', player.cache_.currentTime)
106   emits('onPlayerPause', player.cache_.currentTime)
107 }
108 // 播放回调(播放时会调用)(用户操作调用)
109 const onPlayerPlay = (player) => {
110   emits('onPlayerPlay', player)
111 }
112 // 播放状态改变回调
113 const playerStateChanged = (playerCurrentState) => {
114   console.log('数据变化', playerCurrentState)
115   emits('playerStateChanged', playerCurrentState)
116 }
117 // 视频播完回调 (结束)(视频播放完毕调用)
118 const onPlayerEnded = (player) => {
119   console.log('结束', player)
120   emits('onPlayerEnded', player)
121 }
122 // 等待(视频中出现loading就会调用,加载时调用)(高频调用)
123 const onPlayerWaiting = (player) => {
124   console.log('等待', player)
125   emits('onPlayerWaiting', player)
126 }
127 // 播放中(进入播放状态会调用)(等待onPlayerWaiting和播放onPlayerPlay执行后会调用)(高频调用)
128 const onPlayerPlaying = (player) => {
129   console.log('播放中', player)
130   emits('onPlayerPlaying', player)
131 }
132 // 当播放器在当前播放位置下载数据时触发
133 const onPlayerLoadeddata = (player) => {
134   console.log('预加载', player)
135   emits('onPlayerLoadeddata', player)
136 }
137 // 媒体的readyState为HAVE_FUTURE_DATA或更高(预加载onPlayerLoadeddata调用后会调用)(初始化调用)
138 const onPlayerCanplay = (player) => {
139   console.log('是否播放', player)
140   emits('onPlayerCanplay', player)
141 }
142 // 能够从头到尾播放(是否播放onPlayerCanplay调用后会调用)(初始化调用)这意味着可以在不缓冲的情况下播放整个媒体文件
143 const onPlayerCanplaythrough = (player) => {
144   console.log('能够从头到尾播放', player)
145   emits('onPlayerCanplaythrough', player)
146 }
147 </script>
148 
149 <style lang="scss" scoped>
150 .course_node_video {
151   width: 100%;
152   height: auto;
153   margin: 0 auto;
154   text-align: center;
155   object-fit: fill;
156 }
157 ::v-deep video {
158   width: 100% !important;
159   height: calc(100vh - 200px) !important;
160   object-fit: fill;
161 }
162 </style>

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