Vue3視頻播放組件 vue3-video-play使用方式

更新時間：2025年09月27日 08:38:32 作者：謝一歇_fn

vue3-video-play是Vue3的視頻播放組件,基于原生video標簽開發(fā),支持MP4和HLS流,提供全局/局部引入方式,可監(jiān)聽播放、暫停等事件,并具備字幕、播放列表等高級功能,適合靈活配置需求

一、安裝

你可以使用以下命令安裝 vue3-video-play：

npm install vue3-video-play --save

或者：

yarn add vue3-video-play --save

二、全局引入

在項目的入口文件中，全局引入 vue3-video-play：

import { createApp } from 'vue';
import App from './App.vue';
import videoPlay from 'vue3-video-play';
import 'vue3-video-play/dist/style.css';

const app = createApp(App);
app.use(videoPlay);
app.mount('#app');

三、局部引入

如果只需要在某個組件中使用，可以局部引入：

import 'vue3-video-play/dist/style.css';
import VideoPlay from 'vue3-video-play';

四、基本使用

在組件中，你可以這樣使用 vue3-video-play：

           <vue3videoPlay
            v-if="videoItem.videoUrl && videoItem.device_type == 2"
            control
            class="video-container-flv"
            :src="videoItem.videoUrl"
            style="width: 100%;height: 100%;"
            autoPlay
            :props="{
              width: '100%',
              height: '100%',
              color: '#409eff',
              title: '',
              muted: false, //靜音
              webFullScreen: false,
              speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
              autoPlay: true, //自動播放
              loop: false, //循環(huán)播放
              mirror: false, //鏡像畫面
              ligthOff: false, //關燈模式
              volume: 0.3, //默認音量大小
              control: true, //是否顯示控制
              controlBtns: [
                'audioTrack',
                'quality',
                'speedRate',
                'volume',
                'setting',
                'pip',
                'pageFullScreen',
                'fullScreen'
              ] //顯示所有按鈕,
            }"
          ></vue3videoPlay>

五、事件監(jiān)聽

你還可以為 vue3-video-play 添加事件監(jiān)聽，例如監(jiān)聽播放、暫停和時間更新：

<vue3-video-play
  @play="onPlay"http://播放
  @pause="onPause"http://暫停
  @timeupdate="onTimeupdate"http://時間更新
/>

六、播放 HLS 流

vue3-video-play 能播放MP4格式，也支持播放 HLS 流。只需將 type 設置為 m3u8，并提供正確的 HLS 流地址：

const videoOptions = reactive({
  src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', // HLS 流地址
  type: 'm3u8', // 設置類型為 m3u8
});

<vue3-video-play
  :options="videoOptions"
/>

七、更多功能

vue3-video-play 還支持更多高級功能，如字幕、播放列表等。具體配置可以參考 vue3-video-play 官方文檔。

通過以上步驟，你可以在 Vue3 項目中輕松集成 vue3-video-play，并根據(jù)項目需求進行自定義配置。

總結

希望這篇文章能幫助你更好地使用 vue3-video-play，為你的項目添加強大的視頻播放功能。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

深入淺析Vue組件開發(fā)
本文是主要介紹基于Vue的一個組件開發(fā)。本文給大家介紹的非常詳細，具有參考借鑒價值，需要的朋友參考下吧
2016-11-11
Vue收集依賴與觸發(fā)依賴源碼刨析
vue對依賴的管理使用的是發(fā)布訂閱者模式，其中watcher扮演訂閱者，Dep扮演發(fā)布者。所以dep中會有多個watcher，一個訂閱者也可以有多個發(fā)布者(依賴)?？偣踩齻€過程：定義依賴、收集依賴、觸發(fā)依賴。下面開始詳細講解三個過程
2022-10-10
vue實現(xiàn)微信分享鏈接添加動態(tài)參數(shù)的方法
這篇文章主要介紹了vue微信分享鏈接添加動態(tài)參數(shù)的實現(xiàn)方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下
2019-04-04
vue.config.js常用配置詳解
這篇文章主要介紹了vue.config.js常用配置詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-11-11
詳解Vue中使用Axios攔截器
這篇文章主要Vue使用Axios攔截器，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
vue中的ElementUI的使用詳解
本文通過實例代碼給大家介紹了vue中的ElementUI的使用，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-10-10
關于elementUI select控件綁定多個值(對象)
這篇文章主要介紹了關于elementUI select控件綁定多個值(對象)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
如何修改Vue打包后文件的接口地址配置的方法
這篇文章主要介紹了如何修改Vue打包后文件的接口地址配置的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-04-04
vue3子組件數(shù)據(jù)無法更新問題
這篇文章主要介紹了vue3子組件數(shù)據(jù)無法更新問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
五分鐘帶你快速了解vue的常用實例方法
最近項目中又使用了vue,所以來給大家總結下,下面這篇文章主要給大家介紹了關于vue的常用實例方法,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2022-09-09