本插件提供了一个工厂方法,可用于实现模态框需求,适当UI和CSS重写后也可以用于实现各种挂件,效果参见Demo
开始使用前,需要先在页面中引入popup.js
插件模块。
<script type="text/javascript" src="./lib/index.browser.js"></script>
JS模块引入后,将在全局产生一个用来生成popup
pluginConfig
的工厂函数window.chimeePluginPopup
,调用该函数传入相应参数即可得到目标popupPluginConfig
。
或者JS代码中
import chimeePluginPopup from './lib/index.js';
如果是基于node构建环境开发,建议使用npm install chimee-plugin-popup --save
,需要的业务页import就好了
import chimeePluginPopup from 'chimee-plugin-popup';
通过
Chimee.install(popupPluginConfig)
把插件注册到Chimee
类,即可在实例化播放器时在option.plugin
数组上设定popupPlugin
对应的name来启用UI组件。
我们用来实现一个居中弹层,使用方式示例:
Chimee.install(chimeePluginPopup({
name: 'cc_popup',
title: '这是一个居中信息框',
body: '这里是信息内容',
offset: '50% 50%',
width: '200px'
}));
const player = new Chimee({
src: 'http://cdn.toxicjohann.com/lostStar.mp4',
type: 'vod',
box: 'mp4',
wrapper: '#wrapper',
plugin: ['cc_popup'],
auto: true
});
可以配置设定的参数除了pluginConfig
包含内容之外,你可能会比较容易用到的几组参数:
cc_popup
作为插件名字,那么在接下来就可以通过 player.ccPopup
来访问插件实例(注册时自动驼峰化)。
像素:123px
或百分比:12.3%
值,如:0px 0px
、10% 20%
。'leftAndTop'
或'left top'
或'top right bottom left'
<vs-pp-close class="_close">×</vs-pp-close>
<vs-pp-head>${title}</vs-pp-head>
<vs-pp-body>${body}</vs-pp-body>
events 用来实现交互控制,比如我们要通过右键控制popup的展示隐藏、位置移动,可以这么写:
Chimee.install(chimeePluginPopup({
name: 'menu_popup',
...
hide: true,
events: {
contextmenu: function(e) {
this.offset(e.offsetX + 'px ' + e.offsetY + 'px').open(e);
e.preventDefault();
},
mousedown: function(e){
e.button !==2 && this.close(e)
}
}
}));
比如我们要感知popup的开启关闭,做相应后续逻辑执行,可以使用popup实现时新增的生命周期钩子:
Chimee.install(chimeePluginPopup({
name: 'my_popup',
...
opened(e, pluginTarget) {
...
},
closed (e, pluginTarget) {
...
}
}));
如果想监听任意弹层组件的关闭,可以使用事件监听这么写:
Chimee.install(chimeePluginPopup({
name: 'my_popup',
...
events: {
popupOpen: function (e, pluginTarget) {
if(this.__id === pluginTarget.__id){
console.log('popupOpen:', e, this, pluginTarget);
}
},
popupClose: function (e, pluginTarget) {
if (this.__id === pluginTarget.__id) {
console.log('popupClose:', e, this, pluginTarget);
}
}
}
}));
也许你已经留意到了上面if(this.__id === pluginTarget.__id)
的判断,这里因为 events 是针对全局范围任意插件或系统事件的监听(包括播放器本身的play、ended、pause、volumechange...),所以这里可以通过判断确定事件发出自哪个插件。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。