和县网站建设,做网站好还是做淘宝好,手机网站图片切换jquery,文化公司网站建设策划书Vue3-video-play适用于 Vue3 的 hls.js 播放器组件 | 并且支持MP4/WebM/Ogg格式。 1、支持快捷键操作 2、支持倍速播放设置 3、支持镜像画面设置 4、支持关灯模式设置 5、支持画中画模式播放 6、支持全屏/网页全屏播放 7、支持从固定时间开始播放 8、支持移动端#xff0c;移动… Vue3-video-play适用于 Vue3 的 hls.js 播放器组件 | 并且支持MP4/WebM/Ogg格式。 1、支持快捷键操作 2、支持倍速播放设置 3、支持镜像画面设置 4、支持关灯模式设置 5、支持画中画模式播放 6、支持全屏/网页全屏播放 7、支持从固定时间开始播放 8、支持移动端移动端会自动调用自带视频播放器 9、支持hls视频流播放支持直播 10、hls播放支持清晰度切换 目录 1、安装方式
1npm安装方式 2yarn安装方式
2、使用方式
1局部使用
2全局使用
3、示例代码
1事件示例
2Hls m3u8视频/直播
4、属性 Props 1、安装方式
1npm安装方式 npm i vue3-video-play --save 2yarn安装方式 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所有事件。 templatedivvue3VideoPlay width800pxtitle钢铁侠:srcoptions.src:posteroptions.posterplayonPlaypauseonPause timeupdateonTimeupdate canplayonCanplay //div/templatescript setup langts
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, 可以播放)
}
/scriptstyle scoped
/style 2Hls m3u8视频/直播 vue3-video-play 支持m3u8(hls)播放 templatedivvue3VideoPlay width800pxtitle冰河世纪:srcoptions.src:typeoptions.type:autoPlayfalse//div/template
script setup langts
import { reactive } from vue;
const options reactive({src: https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8, //视频源type: m3u8, //视频类型
})
/scriptstyle scoped
/style 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全屏/退出全屏
