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-800pxheight播放器高度string-450pxcolor播放器主色调string-#409effsrc视频资源string--title视频名称string--type视频类型string-video/mp4poster视频封面string-视频第一帧webFullScreen网页全屏boolean-falsespeed是否支持快进快退boolean-truecurrentTime跳转到固定播放时间(s)number-0playsinlineios点击屏幕是否全屏boolean-falsemuted静音boolean-falsespeedRate倍速配置array-["2.0", "1.0", "1.5", "1.25", "0.75", "0.5"]autoPlay自动播放boolean-false,为true时会自动静音loop循环播放boolean-falsemirror镜像画面boolean-falseligthOff关灯模式boolean-falsevolume默认音量number0-10.3control是否显示控制器boolean-truecontrolBtns控制器显示的按钮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镜像翻转事件valloopChange循环播放开关事件vallightOffChange关灯模式事件valloadstart客户端开始请求数据eventprogress客户端正在请求数据eventerror请求数据时遇到错误eventstalled网速失速eventplay开始播放时触发eventpause暂停时触发eventloadedmetadata成功获取资源长度eventloadeddata缓冲中eventwaiting等待数据，并非错误eventplaying开始回放eventcanplay暂停状态下可以播放eventcanplaythrough可以持续播放eventtimeupdate更新播放时间eventended播放结束eventratechange播放速率改变eventdurationchange资源长度改变eventvolumechange音量改变event

快捷键说明

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