发布于:2021-08-23
之前的vue项目中用到视频播放器，但是UI不是很好看，索性就打算写一个视频播放器插件紧随着vue3的发布，vue3的生态还不是很完整，就索性把这个视频播放器插件修改成了vue3版，最终使用vite2+vue3开发
插件Github地址 vue-video-player
hls.js player component for Vue3.
适用于 Vue3 的 hls.js 播放器组件。
先看一下这个播放器(vue3-video-play)的界面吧
vue3-video-play视频播放插件基于原生的HTML5的
必须使用 [email protected]及以上版本
功能一览
支持快捷键操作
支持倍速播放设置
支持镜像画面设置
支持关灯模式设置
支持画中画模式播放
支持全屏/网页全屏播放
支持从固定时间开始播放
支持移动端，移动端会自动调用自带视频播放器
支持hls视频流播放，支持直播
hls播放支持清晰度切换
主页示例
https://xdlumia.github.io
rc版本 v1.3.0-rc.3
新增: 支持hls视频流播放
新增: 新增画质切换，需视频流支持
新增: 新增画音视切换，需视频流支持
新增: props参数增加currentTime属性，可跳转到固定时间播放
新增: props参数增加type属性，视频格式
近期更新 v1.2.52
新增: 右键菜单功能，右键菜单包涵，视频滤镜调节、快捷键说明、复制当前视频网址
新增: mirrorChange loopChange lightOffChange 事件
新增: 增加空格快捷键 播放/暂停 的操作
优化: 如果音量为 0 关闭静音按钮 音量设置为 5
使用指南
安装
npm安装：
npm i vue3-video-play --save
yarn安装：
yarn add vue3-video-play --save
开始使用
全局使用
import{ createApp }from'vue'importAppfrom'./App.vue'letapp = createApp(App)importvue3videoPlayfrom'vue3-video-play'// 引入组件import'vue3-video-play/dist/style.css'// 引入cssapp.use(vue3videoPlay)app.mount('#app')
组件内使用
// require styleimport'vue3-video-play/dist/style.css'import{ videoPlay }from'vue-video-play'exportdefault{components: { videoPlay }}
基本示例
提供了丰富了配置功能
:::demo 自定义配置 比如自定义poster。
:::
可以通过props的speed开启或关闭进度条功能, 并且通过 currentTime属性控制从60秒开始播放
:::demo 通过speed关闭进度条拖动功能。 并且通过 currentTime属性控制从60秒开始播放
:::
还可以通过props的control属性 来控制是否显示控制器
:::demo 通过control 来控制是否显示控制器
:::
事件示例
:::demo vue3-video-play 支持原生video所有事件。
width="800px" title="钢铁侠" :src="options.src" :poster="options.poster" @play="onPlay" @pause="onPause" @timeupdate="onTimeupdate" @canplay="onCanplay" />
:::
Hls m3u8视频/直播
:::demo vue3-video-play 支持m3u8(hls)播放
width="800px" title="冰河世纪" :src="options.src" :type="options.type" :autoPlay="false" />
:::
Props
vue3-video-play 支持video原生所有Attributes video原生属性 使用方式和props属性使用一致
名称说明类型可选值默认值
width播放器宽度string-800px
height播放器高度string-450px
title视频名称string--
src视频资源string--
type视频类型string-video/mp4
color播放器主色调string-#409eff
webFullScreen网页全屏boolean-false
speed是否支持快进快退boolean-true
currentTime跳转到固定播放时间(s)number-0
speedRate倍速配置array-[“2.0”, “1.0”, “1.5”, “1.25”, “0.75”, “0.5”]
mirror镜像画面boolean-false
ligthOff关灯模式boolean-false
muted静音boolean-false
autoPlay自动播放boolean-false,为true时会自动静音
loop循环播放boolean-false
volume默认音量0.30-10.3
poster视频封面string-视频第一帧
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全屏/退出全屏
Author
xdlumia
点个start
vue3-video-play