Skip to content

开始

可以根据选择性配置

元素源

字符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 开启截图控件

Released under the MIT License.