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 styleimport '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' // 引入cssapp.use(vue3videoPlay)app.mount('#app')

3、示例代码

（1）事件示例

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

import { reactive } from 'vue';const options = reactive({src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源poster: '', //封面})const onPlay = (ev) => {console.log('播放')}const onPause = (ev) => {console.log(ev, '暂停')}const onTimeupdate = (ev) => {console.log(ev, '时间更新')}const onCanplay = (ev) => {console.log(ev, '可以播放')}

（2）Hls m3u8视频/直播

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

import { reactive } from 'vue';const options = reactive({src: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8", //视频源type: 'm3u8', //视频类型})

4、属性Props

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

props属性controlBtns按钮说明

Events

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

快捷键说明