更新记录

1.1.0(2024-01-02) 下载此版本

修复无法播放问题,新增是否在无操作是自动隐藏控件

1.0.1(2023-08-16) 下载此版本

新增历史播放记录提示,当前播放时间获取,Bug及体验优化

1.0.0(2023-08-15) 下载此版本

首发版本

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-nvue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

支持倍速播放,切换视频链接播放,提示历史播放时间,目前兼容APP,H5,后续完善进度条后会支持小程序,敬请期待

打包 App 时必须勾选 manifest.json->App 模块权限配置->VideoPlayer 模块

使用方法

<hao-playVideo ref="haoPlayVideo" :videoUrl="videoPath"></hao-playVideo> 

属性说明

名称 类型 默认值 描述
videoUrl String 视频链接
videoHeight String 470rpx 视频高度
centPlaySize String 100rpx 中间播放按钮大小
poster String 封面图
isControl Boolean true 是否显示控件
closeControlTime Number 4000 无操作后自动隐藏控件的时间,毫秒
isCloseControl Boolean true 是否让控件在无操作时自动隐藏
historyTime Number null 上次观看的时间 秒
showHistoryTime Number 4000 多久后关闭上次观看时间的提示
sliderSize Number 12 滑块大小,取值范围12-28
sliderBlockColor String #ffffff 滑块颜色
sliderBgColor String #eeeeee 进度条未选部分背景色
sliderAcColor String #87ceeb 进度条已选部分背景色
isChagePlayVideo Boolean true 切换视频链接后自动播放(优先级小于isAutoplay)
isDoubleClick Boolean true 是否双击播放/暂停
isAutoplay Boolean false 是否自动播放
isLoop Boolean false 是否循环播放
isMuted Boolean false 是否静音播放
totalDuration Number null 视频总时长(s),不填也会根据播放拿到总时长

Event 事件

事件名 说明 类型 回调参数
changeMultiple 倍数切换 emit 倍数值 Object
progressChange 进度条切换视频时间点 emit 时间点 number
fisrtPlay 最开始点中间播放按钮 emit
end 播放结束 emit
pause 播放暂停 emit
error 播放出错 emit
play 控件处点击播放 emit
suspend 控件处点击暂停 emit
full 视频进入全屏时触发 emit
offFull 退出全屏时触发 emit

ref事件

获取视频当前播放时间(秒)

let currentTime = this.$refs.haoPlayVideo.currentVideoTime();

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问