Vue3视频播放器组件Vue3-video-play入门教程
创始人
2024-06-01 20:42:34
0

Vue3-video-play适用于 Vue3 的 hls.js 播放器组件 | 并且支持MP4/WebM/Ogg格式。

1、支持快捷键操作
2、支持倍速播放设置
3、支持镜像画面设置
4、支持关灯模式设置
5、支持画中画模式播放
6、支持全屏/网页全屏播放
7、支持从固定时间开始播放
8、支持移动端,移动端会自动调用自带视频播放器
9、支持hls视频流播放,支持直播

10、hls播放支持清晰度切换

目录

1、安装方式

(1)npm安装方式

 (2)yarn安装方式

2、使用方式

(1)局部使用

(2)全局使用

3、示例代码

(1)事件示例

(2)Hls m3u8视频/直播

4、属性 Props


1、安装方式

(1)npm安装方式

npm i vue3-video-play --save

 (2)yarn安装方式

yarn add vue3-video-play --save

2、使用方式

(1)局部使用

// require style
import 'vue3-video-play/dist/style.css'
import { videoPlay } from 'vue-video-play'
export default {components: {videoPlay}
}

(2)全局使用

import { createApp } from 'vue'
import App from './App.vue'
let app = createApp(App)import vue3videoPlay from 'vue3-video-play' // 引入组件
import 'vue3-video-play/dist/style.css' // 引入css
app.use(vue3videoPlay)app.mount('#app')

3、示例代码

(1)事件示例

vue3-video-play 支持原生video所有事件。

(2)Hls m3u8视频/直播

vue3-video-play 支持m3u8(hls)播放


4、属性 Props

​vue3-video-play 支持video原生所有Attributes video原生属性 使用方式和props属性使用一致

名称说明类型可选值默认值
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
playsinlineios点击屏幕是否全屏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默认音量number0-10.3
control是否显示控制器boolean-true
controlBtns控制器显示的按钮array['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen']['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen']
preload预加载stringmeta/auto/noneauto

props属性 controlBtns 按钮说明

名称说明
audioTrack音轨切换按钮
quality视频质量切换按钮
speedRate速率切换按钮
volume音量
setting设置
pip画中画按钮
pageFullScreen网页全屏按钮
fullScreen全屏按钮

Events

vue3-video-play支持video原生所有事件 video默认事件

事件名称说明回调
mirrorChange镜像翻转事件val
loopChange循环播放开关事件val
lightOffChange关灯模式事件val
loadstart客户端开始请求数据event
progress客户端正在请求数据event
error请求数据时遇到错误event
stalled网速失速event
play开始播放时触发event
pause暂停时触发event
loadedmetadata成功获取资源长度event
loadeddata缓冲中event
waiting等待数据,并非错误event
playing开始回放event
canplay暂停状态下可以播放event
canplaythrough可以持续播放event
timeupdate更新播放时间event
ended播放结束event
ratechange播放速率改变event
durationchange资源长度改变event
volumechange音量改变event

快捷键说明

键名说明
Space暂停/播放
方向右键 →单次快进 10s,长按 5 倍速播放
方向左键 ←快退 10s
方向上键 ↑音量+10%
方向下键 ↓音量-10%
Esc退出全屏/退出网页全屏
F全屏/退出全屏

相关内容

热门资讯

诗经式微原文带拼音 诗经式微原文带拼音式(shi)微(hei)你好:《诗经》式微原文带拼音如下:式微《诗经》shìwēi...
浙江启动暑期防溺水平安公益活动...   中新网杭州7月2日电 (钱晨菲 郑莲花)7月2日,“警”防溺水 共筑平安——2025暑期防溺水系...
港股异动 | 科指跌超1%,金... 7月3日,恒生科技指数跌超1%,成分股中,金山软件跌超6%,阿里巴巴-W跌超3%,京东集团-SW、哔...
义乌这几个村,分房了! (转自:爱义乌)7月2日江东街道新社区集聚(江锦花园B区)高层公寓抽签定位活动在市委党校报告厅举行江...
海口13所学校获得“国字号”荣... 转自:海口发布近日,教育部办公厅印发《关于确定第二批全国中小学科学教育实验区、实验校的通知》,海口市...
求欧美浪漫爱情片啊啊啊。最好是... 求欧美浪漫爱情片啊啊啊。最好是喜剧结局的!!!越多越好please什么情况啊?
上半年深圳二手房成交量同比增长... 来源:澎湃新闻 2025年上半年,深圳房地产市场保持活跃态势。机构监测数据显示,深圳二手房市场虽然经...
网络达人齐聚建州 建瓯挑幡伞技... 7月2日,“看见福建 千年建州”网络主题宣传活动在福建南平建瓯启动,各平台网络达人与会。国家级非物质...
国安达(300902.SZ):... 2025年7月2日,国安达(300902.SZ)公告称,公司控股股东暨实际控制人之一、董事长洪伟艺计...
2人就餐点茶后还被收11元白开... 转自:今晚报 【#2人就餐点茶后还被收11元白开水费#】...