配置
图片说明
为了便于说明后续参数的意义,下图展示了一个播放器实例的截图:

配置
在创建ZWPlayer
对象时,我们需要给zwplayer
构造函数传入一个JS对象作为参数,一个拥有比较完整属性的构造函数参数JS对象样本如下(后续新的版本因为功能增强可能会增加成员,但不会减少或修改前面版本定义的属性名称,保证既有API的固化,便于无缝替换升级):zwplayer
播放器构造函数的参数大多数不是必须设置的,可以缺省,请根据具体需要设置即可。
必选配置
选择器
播放器实例化时需要明确 DOM 的占位,video
将要输出到该 DOM 下,播放器的尺寸与占位 DOM 一致。播放器容器 id 也可以用容器的 DOM 实例来代替。
new ZWPlayer({
playerElm: '#zwplayer-wrap1',
});
视频源
选择器和视频源是播放器必须提供的配置项,缺一不可。
new ZWPlayer({
playerElm: '#zwplayer-wrap1',
url: 'http://192.168.1.202:8088/vod/mp4/movie.mp4'
});
可选配置
自定义尺寸
开发者可以为播放器设置尺寸大小。
- 配置项:
videostyle
new ZWPlayer({
playerElm: '#zwplayer-wrap1',
url: 'http://192.168.1.202:8088/vod/mp4/movie.mp4',
videostyle: "width:100%;height:100%;",
});
流式布局
设置为流式布局,可使播放器宽度跟随父元素的宽度大小变化,且高度按照配置项中的高度和宽度的比例来变化(播放器宽高未设置时按照内部默认值来计算)。
配置项:
fluid
默认值:
false
参考值:
true
|false
配置项(宽高比例):
ratio
参考值:
16:9
new ZWPlayer({
playerElm: '#zwplayer-wrap1',
url: 'http://192.168.1.202:8088/vod/mp4/movie.mp4',
fluid: true,
ratio:"16:9",
});
静音
开发者可以为播放器预设启动时静音。
- 配置项:
muted
- 默认值:
false
- 参考值:
true
|false
new ZWPlayer({
playerElm: '#zwplayer-wrap1',
url: 'http://192.168.1.202:8088/vod/mp4/movie.mp4',
muted: true,
});
自动播放
目前大多数浏览器厂商不建议播放器自动播放视频,开发者对此有特殊需求时可通过该配置项打开。
- 配置项:
autoplay
- 默认值:
false
- 参考值:
true
|false
new ZWPlayer({
playerElm: '#zwplayer-wrap1',
url: 'http://192.168.1.202:8088/vod/mp4/movie.mp4',
autoplay: true,
});
海报
设置海报,即在播放器停止时播放器视频区域显示的图片。
- 配置项:
poster
- 默认值:
''
- 参考值:
'https://xxxx/xxx.jpg'
new ZWPlayer({
playerElm: '#zwplayer-wrap1',
url: 'http://192.168.1.202:8088/vod/mp4/movie.mp4',
poster: 'https://xxxx/xxx.jpg',
});
界面功能按钮
媒体信息按钮
- 配置项:
infoButton
- 默认值:
false
- 参考值:
true
|false
new ZWPlayer({
playerElm: '#zwplayer-wrap1',
url: 'http://192.168.1.202:8088/vod/mp4/movie.mp4',
infoButton: true,
});
倍速播放按钮
- 配置项:
speedButton
- 默认值:
false
- 参考值:
true
|false
new ZWPlayer({
playerElm: '#zwplayer-wrap1',
url: 'http://192.168.1.202:8088/vod/mp4/movie.mp4',
speedButton: true,
});
设置按钮
如果为true,则播放控制条上会出现一个设置按钮,当鼠标移动到设置按钮上时,会弹出设置菜单。目前可以设置的包括图像旋转,循环播放控制与视频色度调节等功能。后续版本的设置功能可能更丰富。
- 配置项:
optionButton
- 默认值:
false
- 参考值:
true
|false
new ZWPlayer({
playerElm: '#zwplayer-wrap1',
url: 'http://192.168.1.202:8088/vod/mp4/movie.mp4',
optionButton: true,
});
图像截取按钮
点击图像截取按钮可以让用户一键截取当前正在播放的视频图像
- 配置项:
snapshotButton
- 默认值:
false
- 参考值:
true
|false
new ZWPlayer({
playerElm: '#zwplayer-wrap1',
url: 'http://192.168.1.202:8088/vod/mp4/movie.mp4',
snapshotButton: true,
});
小窗口播放
窗口滚动将要隐藏播放器时,自动切换成弹出小窗口播放
- 配置项:
autoSmallWindow
- 默认值:
false
- 参考值:
true
|false
new ZWPlayer({
playerElm: '#zwplayer-wrap1',
url: 'http://192.168.1.202:8088/vod/mp4/movie.mp4',
autoSmallWindow: true,
});
功能
LOGO设置台标
配置项:
logo
参考值:
{
icon: ‘logo.png’,
dock: ‘left’,
x: ‘5%’,
y: ‘5%’,
width: ‘30%’,
height: ‘30%’,
opacity: 70
}
功能详情参照示例
章节打点
- 配置项:
chapters
功能详情参照示例
字幕
功能详情参照示例
弹幕
- 配置项:
enableDanmu
- 默认值:
false
- 参考值:
true
|false
功能详情参照示例
进度条缩略图
配置项:
thumbnails
参考值:
{
"url": "http://192.168.1.202:8088/images/thumbnail.jpg",
"width": 128,
"height": 72,
"row": 7,
"col": 7,
"total": 43
}
功能详情参照示例
功能禁用相关
是否禁止播放按钮
- 配置项:
disablePlayBtn
- 默认值:
false
- 参考值:
true
|false
new ZWPlayer({
playerElm: '#zwplayer-wrap1',
url: 'http://192.168.1.202:8088/vod/mp4/movie.mp4',
disablePlayBtn: true,
});
是否禁止在播放过程中拖动进度条
- 配置项:
disableSeek
- 默认值:
false
- 参考值:
true
|false
new ZWPlayer({
playerElm: '#zwplayer-wrap1',
url: 'http://192.168.1.202:8088/vod/mp4/movie.mp4',
disableSeek: true,
});
是否禁止网页全屏
- 配置项:
disableFullscreenWin
- 默认值:
false
- 参考值:
true
|false
new ZWPlayer({
playerElm: '#zwplayer-wrap1',
url: 'http://192.168.1.202:8088/vod/mp4/movie.mp4',
disableFullscreenWin: true,
});
是否禁止画中画功能
- 配置项:
disablePicInPic
- 默认值:
false
- 参考值:
true
|false
new ZWPlayer({
playerElm: '#zwplayer-wrap1',
url: 'http://192.168.1.202:8088/vod/mp4/movie.mp4',
disablePicInPic: true,
});
是否禁止音量控制按钮
- 配置项:
disableVolumeControl
- 默认值:
false
- 参考值:
true
|false
new ZWPlayer({
playerElm: '#zwplayer-wrap1',
url: 'http://192.168.1.202:8088/vod/mp4/movie.mp4',
disableVolumeControl: true,
});
窗口失去焦点时暂停播放
- 配置项:
lostFocusPause
- 默认值:
false
- 参考值:
true
|false
new ZWPlayer({
playerElm: '#zwplayer-wrap1',
url: 'http://192.168.1.202:8088/vod/mp4/movie.mp4',
lostFocusPause: true,
});