vue3视频播放插件_热点关注

迪丽瓦拉

2025-05-30 00:42:34

0次

1、效果图（网上随便找的视频用来测试的，所以有个水印）
在这里插入图片描述
2、引入插件

npm 安装：npm i vue3-video-play --save
yarn 安装：yarn add vue3-video-play --save

3、项目中引入
全局引入方式：在main.js中引入以下

import vue3videoPlay from "vue3-video-play"; // 引入组件
import "vue3-video-play/dist/style.css"; // 引入css
app.use(vue3videoPlay);

组件内引入方式：

import "vue3-video-play/dist/style.css";
import { videoPlay } from "vue-video-play";
components: { videoPlay },

4、使用及例子(因为我用的全局引入)

5、该插件支持原生video所有事件

参数	说明	类型	可选值	默认值
width	播放器宽度	string	-	800px
height	播放器高度	string	-	450px
color	播放器主色调	string	-	#409eff
src	视频资源	string	-	-
title	视频名称	string	-	-
type	视频类型	string	-	video/mp4
poster	视频封面	string	-	视频第一帧
webFullScreen	网页全屏	boolean	-	false
speed	是否支持快进快退	boolean	-	true
currentTime	跳转到固定播放时间(s)	number	-	0
playsinline	ios 点击屏幕是否全屏	boolean	-	false
muted	静音	boolean	-	false
speedRate	倍速配置	array	-	[“2.0”, “1.0”, “1.5”, “1.25”, “0.75”, “0.5”]
autoPlay	自动播放	boolean	-	false,为 true 时会自动静音
loop	循环播放	boolean	-	false
mirror	镜像画面	boolean	-	false
ligthOff	关灯模式	boolean	-	false
volume	默认音量	number	0-1	0.3
control	是否显示控制器	boolean	-	true
controlBtns	控制器显示的按钮	array	[‘audioTrack’, ‘quality’, ‘speedRate’, ‘volume’, ‘setting’, ‘pip’, ‘pageFullScreen’, ‘fullScreen’]	[‘audioTrack’, ‘quality’, ‘speedRate’, ‘volume’, ‘setting’, ‘pip’, ‘pageFullScreen’, ‘fullScreen’]
preload	预加载	string	meta/auto/none	auto

controlBtns 按钮说明

事件Events

快捷键说明