videojs-player | 一款基于vuejs的功能强大的视频播放器组件

videojs-player是一款基于vuejs的功能强大的视频播放器组件。它的内核基于video.js，可以快速的在您的网站中实现可以在线播放视频的视频播放器组件。

最新的videojs-player是6.x版本，仅支持vue3.x。如果您向在vue2.x中使用它，请使用vue-video-player@5.x。

使用方法

安装

如果您想使用videojs-player视频播放器组件，首先您需要安装它，命令如下：

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

使用

作为全局组件

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
    src="/your-path/video.mp4"
    poster="/your-path/poster.jpg"
    controls
    :loop="true"
    :volume="0.6"
    ...
    @mounted="..."
    @ready="..."
    @play="..."
    @pause="..."
    @ended="..."
    @seeking="..."
    ...
  />
</template>

<script>
  import { defineComponent } from 'vue'
  import { VideoPlayer } from '@videojs-player/vue'
  import 'video.js/dist/video-js.css'

  export default defineComponent({
    components: {
      VideoPlayer
    }
  })
</script>
		

自定义播放器播放控制按钮

<template>
  <video-player :children="[]" ...>
    <template v-slot="{ player, state }">
      <div class="custom-player-controls">
        <button @click="state.playing ? player.pause() : player.play()">
          {{ state.playing ? 'Pause' : 'Play' }}
        </button>
        <button @click="player.muted(!state.muted)">
          {{ state.muted ? 'UnMute' : 'Mute' }}
        </button>
        <!-- more custom controls elements ... -->
      </div>
    </template>
  </video-player>
</template>			
		

github网址：https://github.com/surmon-china/videojs-player