Vue3使用video-player實現視頻播放

更新時間：2024年01月31日 15:10:54 作者：頑石九變

video-player是一個基于video.js的視頻播放器組件,本文主要介紹了Vue3使用video-player實現視頻播放,具有一定的參考價值,感興趣的可以了解一下

一、video-player 介紹

video-player 是一個基于 video.js 的視頻播放器組件，它提供了豐富的功能，包括視頻播放、暫停、快進、快退、全屏、音量控制等。

video-player 的使用非常簡單，如下安裝即可。

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

然后在頁面中使用組件，如下所示：

<template>
  <video-player
    src="/your-path/video.mp4"
    poster="/your-path/poster.jpg"
    :controls="true"
    :autoplay="true"
    :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>

其中，src 屬性是視頻的地址，poster 屬性是視頻封面，controls 屬性表示是否顯示控制欄，autoplay 屬性表示是否自動播放。

video-player 還提供了許多其他屬性，可以用來配置視頻播放器的行為，具體可以參考 video-player 文檔。

video-player 是一個非常強大的視頻播放器組件，它可以滿足各種視頻播放需求。如果您需要在 Vue 項目中使用視頻播放器，可以考慮使用 video-player。

注意：最新版本的組件僅支持 Vue3

二、在項目中使用

1、安裝

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

2、在main.js中配置全局引入

// 導入視頻播放組件
import VueVideoPlayer from '@videojs-player/vue'
import 'video.js/dist/video-js.css'


const app = createApp(App)
// 視頻播放組件
app.use(VueVideoPlayer)

3、使用組件

<template>
<main>
  <video-player 
      :src="videoSrc"
      :options="playerOptions"
      :volume="0.6"
  />
</main>
</template>

<script setup>
// 視頻鏈接地址
const videoSrc = ref('http://www.xxx.com/11.mp4');
// 視頻播放器配置
let playerOptions = ref({
  // height: 200,
  // width: document.documentElement.clientWidth, //播放器寬度
  playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
  autoplay: 'any', // 如果true,瀏覽器準備好時開始回放。
  muted: true, // 默認情況下將會消除任何音頻。
  loop: true, // 導致視頻一結束就重新開始。
  preload: 'auto', // 建議瀏覽器在<video>加載元素后是否應該開始下載視頻數據。auto瀏覽器選擇最佳行為,立即開始加載視頻（如果瀏覽器支持）
  language: 'zh-CN',
  aspectRatio: '16:9', // 將播放器置于流暢模式，并在計算播放器的動態(tài)大小時使用該值。值應該代表一個比例 - 用冒號分隔的兩個數字（例如"16:9"或"4:3"）
  fluid: true, // 當true時，Video.js player將擁有流體大小。換句話說，它將按比例縮放以適應其容器。
  notSupportedMessage: '此視頻暫無法播放，請稍后再試', // 允許覆蓋Video.js無法播放媒體源時顯示的默認信息。
  controls: true,
  controlBar: {
    timeDivider: true,
    durationDisplay: true,
    remainingTimeDisplay: false,
    fullscreenToggle: true // 全屏按鈕
  }
})

</script>