VeoPlayer开始
可以根据选择性配置
元素源
字符id占位
javascript
new VeoPlayer({
id:"veo",
})或 dom元素占位
javascript
new VeoPlayer({
id: document.querySelector("#veo")
})id必填项
播放源
设置视频播放源地址，支持mp4 .m3u8 直播流形式
普通视频
javascript
new VeoPlayer({
id: "veo",
url:"xxx.mp4"
})source组视频
javascript
new VeoPlayer({
id:"veo",
url:[
"xxx.mp4",
"xxx1.mp4",
"xxx2.mp4"
]
})m3u8格式
javascript
new VeoPlayer({
id:"veo",
url:"xxx.m3u8"
})说明
使用m3u8格式播放视频必须搭配 Hls.js使用
直播流
javascript
new VeoPlayer({
id:"veo",
url:"xxx.m3u8",
islive:true // 使用直播流开启
})尺寸
javascript
new VeoPlayer({
id:"veo",
url:"xxx.mp4",
width:665,
height:440
})默认尺寸 665 x 440
Number
封面
javascript
new VeoPlayer({
id:"veo",
url:"xxx.mp4",
poster:"xxx.png"
})说明
使用视频封面时视频url和封面url必须在同一域名端口下，否出现跨域
虚化背景
javascript
new VeoPlayer({
id:"veo",
url:"xxx.mp4",
bokeh:{
seconds:2
}
//or
// bokeh:"xxx.png"
})虚化背景:当值为对象时 传入秒数自动截取帧作为虚化背景
- 默认 2 秒
- object/string
主题样式
javascript
new VeoPlayer({
id:"veo",
url:"xxx.mp4",
style:{
themeColor: "#91CB40",
processColor: "#91CB40",
processHeight:6,
animation: true
}
})- 默认进度条为渐变色
- themeColor 主题颜色，包括操作区交互颜色
- processColor 自定义进度条颜色，替换渐变色
- processHeight 进度条高度 最低 为
6px - animation 开启控件交互动画 默认
false
音量
javascript
new VeoPlayer({
id:"veo",
url:"xxx.mp4",
volume:70
})- 默认 70
- 区间 0 ~ 100
- Number
自动播放
javascript
new VeoPlayer({
id:"veo",
url:"xxx.mp4",
autoplay:true
})- 开启/关闭自动播放
- boolean
说明
根据浏览器厂商 首次自动播放功能被禁止，必须要求用户手动触发，否则无解
记忆播放
javascript
new VeoPlayer({
id:"veo",
url:"xxx.mp4",
playTime:500
})- 设置记忆播放
- 单位：秒
- number
循环播放
javascript
new VeoPlayer({
id:"veo",
url:"xxx.mp4",
setting:["loop"]
})- 配置 loop 可循环播放
画中画
javascript
new VeoPlayer({
id:"veo",
url:"xxx.mp4",
setting:["loop","pip"]
})- 配置 pip 开启画中画
- 可组合使用
倍速播放
javascript
new VeoPlayer({
id:"veo",
url:"xxx.mp4",
speed:[2, 1.5, 1, 0.75]
})- 参考 [2, 1.5, 1, 0.75]
- 默认 [1]
控件
javascript
new VeoPlayer({
id:"veo",
url:"xxx.mp4",
plugins:["speed","download","setting","capture"]
})- 默认 播放/暂停 音量 全屏 控件
- 可选 ["speed","download","setting","capture"]
- speed 开启倍速控件
- download 开启下载控件
- settng 开启设置控件，["loop","pip"]
- capture 开启截图控件
