https://github.com/chimeejs/chimee-plugin-contextmenu
ContextmenuPlugin for chimee
https://github.com/chimeejs/chimee-plugin-contextmenu
chimee contextmenu h5 plugin video
Last synced: about 1 month ago
JSON representation
ContextmenuPlugin for chimee
- Host: GitHub
- URL: https://github.com/chimeejs/chimee-plugin-contextmenu
- Owner: Chimeejs
- Created: 2017-07-13T02:43:37.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-11-07T14:47:02.000Z (over 6 years ago)
- Last Synced: 2025-04-17T13:37:47.645Z (about 2 months ago)
- Topics: chimee, contextmenu, h5, plugin, video
- Language: JavaScript
- Size: 151 KB
- Stars: 1
- Watchers: 5
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ContextmenuPlugin of Chimee
> 右键菜单UI插件,可实现自定义菜单项及相应交互,效果参见[Demo](./demo/index.html)
## 默认菜单基本用法
> 使用默认菜单项,不做定制或修改。
```javascript
import contextmenu from 'chimee-plugin-contextmenu';
Chimee.install(contextmenu);
const chimee = new Chimee({
wrapper: '#wrapper',
plugins: [contextmenu.name]
});
```
> 提示:默认菜单项中的“查看日志”,依赖 `chimee-plugin-log` 插件的装载。效果示例:

## 增加自定义菜单项
> 在保留默认菜单的基础上,添加自己需要的菜单项。```javascript
import contextmenu from 'chimee-plugin-contextmenu';
Chimee.install(contextmenu);
const chimee = new Chimee({
wrapper: '#wrapper',
plugins: [{
name: contextmenu.name,
menus: [
{
text: '暂停',
action: 'menu-pause'
}
]
}]
});
player.on('menu-pause', function() {
console.log('我要暂停了');
// 通知播放器暂停
player.emit('pause');
});
```
通过上例看,菜单项的`action`可以触发播放器实例事件,所以也即是所菜单项的 `action` 在插件内部会作为 `player.emit('menu-pause')` 执行。所以,如果你只是想实现暂停菜单,我们可以简化菜单项的 `action` 值,从 `menu-pause` 改为`pause`,就可以了(因为chimee的实现上已经支持通过该途径触发暂停或播放等基本操作)。
这么以来,如果我们要实现右键的播放暂停也就可以省掉 `player.on('menu-pause', ()=>{})` 了。下面我们结合这一点了解一下另一种实现方式。
## 在默认菜单基础上动态更新自定义菜单项
> 在保留默认菜单的基础上,通过API动态实现自己需要的菜单项。```javascript
import contextmenu from 'chimee-plugin-contextmenu';
Chimee.install(contextmenu);
const chimee = new Chimee({
wrapper: '#wrapper',
plugins: [contextmenu.name]
});
// 访问播放器菜单插件实例
const menusPlugin = player.chimeeContextmenu;
player.on('play', () => {
// 当播放器处于播放状态时,自定义菜单项显示暂停
menusPlugin.updatemenu([{text: '暂停', action: 'pause'}]);
}).on('pause', () => {
// 当播放器处于状态暂停时,自定义菜单项显示播放
menusPlugin.updatemenu([{text: '播放', action: 'play'}]);
});
```
这样一个跟随播放状态切换的菜单项就实现了。效果示例:

那么为什么要一直显示基础菜单项呢,要去掉怎么做呢?
## 全自定义菜单
> 不保留默认菜单,添加自己需要的菜单项。```javascript
import contextmenu from 'chimee-plugin-contextmenu';
Chimee.install(contextmenu);
const chimee = new Chimee({
wrapper: '#wrapper',
plugins: [{
name: contextmenu.name,
baseMenus: [], // 这里我们告诉插件,不需要基础菜单项,当然也用来定义想要的基础菜单项
menus: [
{
text: '暂停',
action: 'pause'
},
{
text: 'copyright 360 vs: {VERSION}',
disable: true
},
{
text: '我是一个新窗口打开的连接',
url: 'http://chimee.org'
}
]
}]
});
```效果示例:

欢迎使用、反馈您的建议。