视频播放器"/>
使用js开发的一款高颜值UI的视频播放器
veoplayer是使用js开发的一款高颜值视频播放器，目前市面上关于播放器的种类繁多，例如字节出品的西瓜播放器和元老级别的video.js播放器，功能强大且丰富，在了解video的使用便有了写一个视频播放器的想法该项目已在gitee和github上开源，欢迎star
文档地址：veoplayer-doc
示例图
Html 使用
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="referrer" content="no-referrer" /><title>videoplayer</title><script src="@1.0.1-beta.1/dist/veoplayer.global.min.js"></script></style></head><body><div id="veo"></div><script type="text/javascript">let player = new VeoPlayer({id: "veo",url: "/embed/649c405b5643bb14d8e353f2/649c405b5643bb14d8e353f0.mp4",height: 660,width: 445,style: {themeColor: "#91CB40", // 主题色processColor: "#91CB40", // 进度条主题 默认是渐变色animation: true, //开启控件微动画交互processHeight: 8, // 进度条高度},});</script></body>
</html>vue3 demo
下载安装 pnpm i veoplayer -S
<template><div id="veo"></div>
</template><script setup>import {ref} from 'vue'import veoplayer from 'vueplayer'let player = new VeoPlayer({id: "veo",url: "/embed/649c405b5643bb14d8e353f2/649c405b5643bb14d8e353f0.mp4",height: 660,width: 445,style: {themeColor: "#91CB40", // 主题色processColor: "#91CB40", // 进度条主题 默认是渐变色animation: true, //开启控件微动画交互processHeight: 8, // 进度条高度},plugins: ["speed", "download", "setting", "capture"] // 开启其它控件});
</script>
属性
尺寸
new VeoPlayer({id:"veo",url:"xxx.mp4",width:665,height:440
})
- 默认 660 x 445
虚化背景
new VeoPlayer({id:"veo",url:"xxx.mp4",bokeh:{seconds:2}//or// bokeh:"xxx.png"
})
虚化背景:当值为对象时 传入秒数自动截取帧作为虚化背景
- 默认 2 秒
主题样式
new VeoPlayer({id:"veo",url:"xxx.mp4",style:{themeColor: "#91CB40",processColor: "#91CB40",processHeight:6,animation: true}
})
- 默认进度条为渐变色
- themeColor 主题颜色，包括操作区交互颜色
- processColor 自定义进度条颜色，替换渐变色
- processHeight 进度条高度 最低 为
6px - animation 开启控件交互动画 默认
false
记忆播放
new VeoPlayer({id:"veo",url:"xxx.mp4",playTime:500
})
- 设置记忆播放
- 单位：秒
- number
控件
new VeoPlayer({id:"veo",url:"xxx.mp4",plugins:["speed","download","setting","capture"]
})
- 默认 播放/暂停 音量 全屏 控件
- 可选 [“speed”,“download”,“setting”,“capture”]
- speed 开启倍速控件
- download 开启下载控件
- settng 开启设置控件，[“loop”,“pip”]
- capture 开启截图控件
方法
veoPlay
player.veoPlay()
- 播放
veoPause
player.veoPause()
- 暂停
veoSpeedChange
player.veoSpeedChange((e)=>{})
- 监听倍数播放改变
veoProgressBuffer
player.veoProgressBuffer((e)=>{})
- 监听视频缓冲中
veoTimeUpdate
player.veoTimeUpdate((e)=>{})
- 监听时长更改触发 进度条拖动，点击等
veoError
player.veoError((e)=>{})
- 监听播放异常/视频加载异常
veoWaiting
player.veoWaiting((e)=>{})
- 视频加载中
veoDestroy
player.veoDestroy(boolean)
- 参数：
boolean - 默认：
false【保留根节点]】true【不保留根节点】 - 销毁元素
结语
该视频播放器目前仅支持高版本浏览器，移动端交互可能不够友好.
更多推荐
使用js开发的一款高颜值UI的视频播放器
发布评论