popup plugin of Chimee

本插件提供了一个工厂方法，可用于实现模态框需求，适当UI和CSS重写后也可以用于实现各种挂件，效果参见Demo

开始

开始使用前，需要先在页面中引入popup.js插件模块。

  1. <script type="text/javascript" src="./lib/index.browser.js"></script>
JS模块引入后，将在全局产生一个用来生成popup pluginConfig 的工厂函数 window.chimeePluginPopup，调用该函数传入相应参数即可得到目标popupPluginConfig。

或者JS代码中

  1. import chimeePluginPopup from './lib/index.js';

如果是基于node构建环境开发，建议使用npm install chimee-plugin-popup —save，需要的业务页import就好了

  1. import chimeePluginPopup from 'chimee-plugin-popup';
通过Chimee.install(popupPluginConfig)把插件注册到Chimee类，即可在实例化播放器时在option.plugin数组上设定popupPlugin对应的name来启用UI组件。

我们用来实现一个居中弹层，使用方式示例：

  1. Chimee.install(chimeePluginPopup({
  2.   name: 'cc_popup',
  3.   title: '这是一个居中信息框',
  4.   body: '这里是信息内容',
  5.   offset: '50% 50%',
  6.   width: '200px'
  7. }));
  8. const player = new Chimee({
  9.   src: 'http://cdn.toxicjohann.com/lostStar.mp4',
  10.   type: 'vod',
  11.   box: 'mp4',
  12.   wrapper: '#wrapper',
  13.   plugin: ['cc_popup'],
  14.   auto: true
  15. });

效果

模态窗 - 图1

基本参数说明

可以配置设定的参数除了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模板，默认为：
  1. <vs-pp-close class="_close">×</vs-pp-close>
  2. <vs-pp-head>${title}</vs-pp-head>
  3. <vs-pp-body>${body}</vs-pp-body>

状态控制

  • penetrate 是否将交互事件同步到video元素(事件交互同步给video)，默认值false
  • operable 是否启用事件交互（false则设置CSS事件穿透），默认 true
  • hide 插件装载后是否默认为不展示（预先创建后，自行控制open时机），默认值 false

事件交互

events 用来实现交互控制，比如我们要通过右键控制popup的展示隐藏、位置移动，可以这么写：

  1. Chimee.install(chimeePluginPopup({
  2.   name: 'menu_popup',
  3.   ...
  4.   hide: true,
  5.   events: {
  6.     contextmenu: function(e) {
  7.       this.offset(e.offsetX + 'px ' + e.offsetY + 'px').open(e);
  8.       e.preventDefault();
  9.     },
  10.     mousedown: function(e){
  11.       e.button !==2 && this.close(e)
  12.     }
  13.   }
  14. }));

比如我们要感知popup的开启关闭，做相应后续逻辑执行，可以使用popup实现时新增的生命周期钩子：

  1. Chimee.install(chimeePluginPopup({
  2.   name: 'my_popup',
  3.   ...
  4.   opened(e, pluginTarget) {
  5.     ...
  6.   },
  7.   closed (e, pluginTarget) {
  8.     ...
  9.   }
  10. }));

如果想监听任意弹层组件的关闭，可以使用事件监听这么写：

  1. Chimee.install(chimeePluginPopup({
  2.   name: 'my_popup',
  3.   ...
  4.   events: {
  5.     popupOpen: function (e, pluginTarget) {
  6.       if(this.__id === pluginTarget.__id){
  7.         console.log('popupOpen:', e, this, pluginTarget);
  8.       }
  9.     },
  10.     popupClose: function (e, pluginTarget) {
  11.       if (this.__id === pluginTarget.__id) {
  12.         console.log('popupClose:', e, this, pluginTarget);
  13.       }
  14.     }
  15.   }
  16. }));

也许你已经留意到了上面if(this.id === pluginTarget.id)的判断，这里因为 events 是针对全局范围任意插件或系统事件的监听（包括播放器本身的play、ended、pause、volumechange…），所以这里可以通过判断确定事件发出自哪个插件。