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属性使用一致

props属性 controlBtns 按钮说明

Events

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

快捷键说明