Vue3视频播放组件 vue3-video-play使用方式
作者：谢一歇_fn
vue3-video-play是Vue3的视频播放组件,基于原生video标签开发,支持MP4和HLS流,提供全局/局部引入方式,可监听播放、暂停等事件,并具备字幕、播放列表等高级功能,适合灵活配置需求
在 Vue3 项目中，vue3-video-play 是一个非常实用的视频播放组件，它基于原生的 <video> 标签开发，支持多种视频格式和丰富的自定义功能。
以下是如何在 Vue3 项目中使用 vue3-video-play 的详细步骤。
一、安装
你可以使用以下命令安装 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, //循环播放
mirror: false, //镜像画面
ligthOff: false, //关灯模式
volume: 0.3, //默认音量大小
control: true, //是否显示控制
controlBtns: [
'audioTrack',
'quality',
'speedRate',
'volume',
'setting',
'pip',
'pageFullScreen',
'fullScreen'
] //显示所有按钮,
}"
></vue3videoPlay>五、事件监听
你还可以为 vue3-video-play 添加事件监听，例如监听播放、暂停和时间更新：
<vue3-video-play @play="onPlay"//播放 @pause="onPause"//暂停 @timeupdate="onTimeupdate"//时间更新 />
六、播放 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，并根据项目需求进行自定义配置。
总结
希望这篇文章能帮助你更好地使用 vue3-video-play，为你的项目添加强大的视频播放功能。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。