popup plugin of Chimee
本插件提供了一个工厂方法,可用于实现模态框需求,适当UI和CSS重写后也可以用于实现各种挂件,效果参见Demo
开始
开始使用前,需要先在页面中引入popup.js
插件模块。
JS模块引入后,将在全局产生一个用来生成popup
pluginConfig
的工厂函数window.chimeePluginPopup
,调用该函数传入相应参数即可得到目标popupPluginConfig
。
或者JS代码中
;
如果是基于node构建环境开发,建议使用npm install chimee-plugin-popup --save
,需要的业务页import就好了
;
通过
Chimee.install(popupPluginConfig)
把插件注册到Chimee
类,即可在实例化播放器时在option.plugin
数组上设定popupPlugin
对应的name来启用UI组件。
我们用来实现一个居中弹层,使用方式示例:
Chimee;const player = src: 'http://cdn.toxicjohann.com/lostStar.mp4' type: 'vod' box: 'mp4' wrapper: '#wrapper' plugin: 'cc_popup' auto: true;
效果
基本参数说明
可以配置设定的参数除了pluginConfig
包含内容之外,你可能会比较容易用到的几组参数:
声明
- name 用来绑定实例化后的插件到Chimee实例上。
比如上面代码示例中使用了cc_popup
作为插件名字,那么在接下来就可以通过player.ccPopup
来访问插件实例(注册时自动驼峰化)。
坐标尺寸控制
- offset 控制popup的展示位置。
相对播放器区域四个边界的距离,可设定内容像素:123px
或百分比:12.3%
值,如:0px 0px
、10% 20%
。
设定方式支持:'leftAndTop'
或'left top'
或'top right bottom left'
- translate 控制popup的偏移坐标。
基于offset设定后的位置进行偏移,比如当offset的top或left为50%时,将默认translate相应方向为-50,以实现居中展示,数值设定规则与offset相同。 - width 控制popup宽度,不设置则为auto,参数值必须带有单位
- height 控制popup高度,同上
展现内容
- title 默认浮层标题
- body 默认浮层展示的内容
- html 浮层UI对应的HTML模板,默认为:
<vs-pp-close class="_close">×</vs-pp-close>
<vs-pp-head>${title}</vs-pp-head>
<vs-pp-body>${body}</vs-pp-body>
状态控制
- penetrate 是否将交互事件同步到video元素(事件交互同步给video),默认值false
- operable 是否启用事件交互(false则设置CSS事件穿透),默认 true
- hide 插件装载后是否默认为不展示(预先创建后,自行控制open时机),默认值 false
事件交互
events 用来实现交互控制,比如我们要通过右键控制popup的展示隐藏、位置移动,可以这么写:
Chimee;
比如我们要感知popup的开启关闭,做相应后续逻辑执行,可以使用popup实现时新增的生命周期钩子:
Chimee;
如果想监听任意弹层组件的关闭,可以使用事件监听这么写:
Chimee;
也许你已经留意到了上面if(this.__id === pluginTarget.__id)
的判断,这里因为 events 是针对全局范围任意插件或系统事件的监听(包括播放器本身的play、ended、pause、volumechange...),所以这里可以通过判断确定事件发出自哪个插件。