Vue3 在 H5 及 PC 端简单使用基于 video.js 的 videojs-player 播放器

说明

videojs-player 是基于 video.js 封装的 Vue、React 组件，继承其 API

相关文档

videojs-player 文档

• github：https://github.com/surmon-china/videojs-player
• 示例：https://github.surmon.me/videojs-player
• 实例代码：https://github.com/surmon-china/surmon-china.github.io/tree/source/examples/videojs-player

Video.js 文档

• 官网：https://videojs.com/guides
• API 文档：https://docs.videojs.com/

使用（Vue）

这里使用的是 Vue3 版本的 videojs-player，Vue2 及 React 版本需要去 github 看相关实例

npm install video.js @videojs-player/vue --save

全局组件使用

import { createApp } from 'vue'
import VueVideoPlayer from '@videojs-player/vue'
import 'video.js/dist/video-js.css'

const app = createApp()

app.use(VueVideoPlayer)

局部组件使用

<template>
  <video-player
    class="video-player vjs-big-play-centered"
    src="https://vjs.zencdn.net/v/oceans.mp4"
    poster="https://vjs.zencdn.net/v/oceans.png"
    crossorigin="anonymous"
    playsinline
    controls
    :volume="0.6"
    :height="320"
    :playback-rates="[0.7, 1.0, 1.5, 2.0]"
    @mounted="handleMounted"
    @ready="handleEvent($event)"
    @play="handleEvent($event)"
    @pause="handleEvent($event)"
    @ended="handleEvent($event)"
    @loadeddata="handleEvent($event)"
    @waiting="handleEvent($event)"
    @playing="handleEvent($event)"
    @canplay="handleEvent($event)"
    @canplaythrough="handleEvent($event)"
    @timeupdate="handleEvent(player?.currentTime())"
  />
</template>

<script setup>
  import { shallowRef } from 'vue'
  import { VideoPlayer } from '@videojs-player/vue'
  import 'video.js/dist/video-js.css'
  
  const player = shallowRef()
  
  const handleMounted = (payload) => {
    player.value = payload.player
    console.log('Basic player mounted', payload)
  }

  const handleEvent = (log) => {
    console.log('Basic player event', log)
  }

</script>