Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
lib
 
 
src
 
 
 
 
 
 
 
 
 
 

README.md

popup plugin of Chimee

本插件提供了一个工厂方法,可用于实现模态框需求,适当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包含内容之外,你可能会比较容易用到的几组参数:

声明

  1. name 用来绑定实例化后的插件到Chimee实例上。
    比如上面代码示例中使用了cc_popup作为插件名字,那么在接下来就可以通过 player.ccPopup 来访问插件实例(注册时自动驼峰化)。

坐标尺寸控制

  1. offset 控制popup的展示位置。
    相对播放器区域四个边界的距离,可设定内容像素:123px百分比:12.3%值,如:0px 0px10% 20%
    设定方式支持: 'leftAndTop''left top''top right bottom left'
  2. translate 控制popup的偏移坐标。
    基于offset设定后的位置进行偏移,比如当offset的top或left为50%时,将默认translate相应方向为-50,以实现居中展示,数值设定规则与offset相同。
  3. width 控制popup宽度,不设置则为auto,参数值必须带有单位
  4. height 控制popup高度,同上

展现内容

  1. title 默认浮层标题
  2. body 默认浮层展示的内容
  3. 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>

状态控制

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

事件交互

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...),所以这里可以通过判断确定事件发出自哪个插件。

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.