ContextmenuPlugin of Chimee
右键菜单UI插件,可实现自定义菜单项及相应交互,效果参见Demo
默认菜单基本用法
使用默认菜单项,不做定制或修改。
;Chimee;const chimee = wrapper: '#wrapper' plugins: contextmenuname;
提示:默认菜单项中的“查看日志”,依赖
chimee-plugin-log
插件的装载。
效果示例:
增加自定义菜单项
在保留默认菜单的基础上,添加自己需要的菜单项。
;Chimee;const chimee = wrapper: '#wrapper' plugins: name: contextmenuname menus: text: '暂停' action: 'menu-pause' ;player;
通过上例看,菜单项的action
可以触发播放器实例事件,所以也即是所菜单项的 action
在插件内部会作为 player.emit('menu-pause')
执行。
所以,如果你只是想实现暂停菜单,我们可以简化菜单项的 action
值,从 menu-pause
改为pause
,就可以了(因为chimee的实现上已经支持通过该途径触发暂停或播放等基本操作)。
这么以来,如果我们要实现右键的播放暂停也就可以省掉 player.on('menu-pause', ()=>{})
了。下面我们结合这一点了解一下另一种实现方式。
在默认菜单基础上动态更新自定义菜单项
在保留默认菜单的基础上,通过API动态实现自己需要的菜单项。
;Chimee;const chimee = wrapper: '#wrapper' plugins: contextmenuname;// 访问播放器菜单插件实例const menusPlugin = playerchimeeContextmenu;player;
这样一个跟随播放状态切换的菜单项就实现了。
效果示例:
那么为什么要一直显示基础菜单项呢,要去掉怎么做呢?
全自定义菜单
不保留默认菜单,添加自己需要的菜单项。
;Chimee;const chimee = wrapper: '#wrapper' plugins: name: contextmenuname baseMenus: // 这里我们告诉插件,不需要基础菜单项,当然也用来定义想要的基础菜单项 menus: text: '暂停' action: 'pause' text: 'copyright 360 vs: {VERSION}' disable: true text: '我是一个新窗口打开的连接' url: 'http://chimee.org' ;
效果示例:
欢迎使用、反馈您的建议。