{"id":19640119,"url":"https://github.com/chimeejs/chimee-plugin-contextmenu","last_synced_at":"2025-04-28T11:31:03.339Z","repository":{"id":57197970,"uuid":"97072694","full_name":"Chimeejs/chimee-plugin-contextmenu","owner":"Chimeejs","description":"ContextmenuPlugin for chimee","archived":false,"fork":false,"pushed_at":"2018-11-07T14:47:02.000Z","size":155,"stargazers_count":1,"open_issues_count":1,"forks_count":4,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-17T13:37:47.645Z","etag":null,"topics":["chimee","contextmenu","h5","plugin","video"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Chimeejs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-13T02:43:37.000Z","updated_at":"2018-11-28T12:32:37.000Z","dependencies_parsed_at":"2022-09-16T13:12:28.720Z","dependency_job_id":null,"html_url":"https://github.com/Chimeejs/chimee-plugin-contextmenu","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chimeejs%2Fchimee-plugin-contextmenu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chimeejs%2Fchimee-plugin-contextmenu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chimeejs%2Fchimee-plugin-contextmenu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chimeejs%2Fchimee-plugin-contextmenu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Chimeejs","download_url":"https://codeload.github.com/Chimeejs/chimee-plugin-contextmenu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251304782,"owners_count":21567936,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chimee","contextmenu","h5","plugin","video"],"created_at":"2024-11-11T14:04:43.144Z","updated_at":"2025-04-28T11:31:02.413Z","avatar_url":"https://github.com/Chimeejs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ContextmenuPlugin of Chimee\n\n\u003e 右键菜单UI插件，可实现自定义菜单项及相应交互，效果参见[Demo](./demo/index.html)\n\n## 默认菜单基本用法\n\n\u003e 使用默认菜单项，不做定制或修改。\n\n```javascript\nimport contextmenu from 'chimee-plugin-contextmenu';\nChimee.install(contextmenu);\nconst chimee = new Chimee({\n  wrapper: '#wrapper',\n  plugins: [contextmenu.name]\n});\n```\n\u003e 提示：默认菜单项中的“查看日志”，依赖 `chimee-plugin-log` 插件的装载。\n\n效果示例：\n\n![](https://p2.ssl.qhimg.com/dr/600__/t013b8a3bc80f678ea0.png)\n\n## 增加自定义菜单项\n\u003e 在保留默认菜单的基础上，添加自己需要的菜单项。\n\n```javascript\nimport contextmenu from 'chimee-plugin-contextmenu';\nChimee.install(contextmenu);\nconst chimee = new Chimee({\n  wrapper: '#wrapper',\n  plugins: [{\n    name: contextmenu.name,\n    menus: [\n      {\n        text: '暂停',\n        action: 'menu-pause'\n      }\n    ]\n  }]\n});\nplayer.on('menu-pause', function() {\n  console.log('我要暂停了');\n  // 通知播放器暂停\n  player.emit('pause');\n});\n```\n通过上例看，菜单项的`action`可以触发播放器实例事件，所以也即是所菜单项的 `action` 在插件内部会作为 `player.emit('menu-pause')` 执行。\n\n所以，如果你只是想实现暂停菜单，我们可以简化菜单项的 `action` 值，从 `menu-pause` 改为`pause`，就可以了（因为chimee的实现上已经支持通过该途径触发暂停或播放等基本操作）。\n\n这么以来，如果我们要实现右键的播放暂停也就可以省掉 `player.on('menu-pause', ()=\u003e{})` 了。下面我们结合这一点了解一下另一种实现方式。\n\n## 在默认菜单基础上动态更新自定义菜单项\n\u003e 在保留默认菜单的基础上，通过API动态实现自己需要的菜单项。\n\n```javascript\nimport contextmenu from 'chimee-plugin-contextmenu';\nChimee.install(contextmenu);\nconst chimee = new Chimee({\n  wrapper: '#wrapper',\n  plugins: [contextmenu.name]\n});\n// 访问播放器菜单插件实例\nconst menusPlugin = player.chimeeContextmenu;\nplayer.on('play', () =\u003e {\n  // 当播放器处于播放状态时，自定义菜单项显示暂停\n  menusPlugin.updatemenu([{text: '暂停', action: 'pause'}]);\n}).on('pause', () =\u003e {\n  // 当播放器处于状态暂停时，自定义菜单项显示播放\n  menusPlugin.updatemenu([{text: '播放', action: 'play'}]);\n});\n```\n这样一个跟随播放状态切换的菜单项就实现了。\n\n效果示例：\n\n![](https://p0.ssl.qhimg.com/dr/600__/t0152f1dafd30e6fd7c.png)\n\n那么为什么要一直显示基础菜单项呢，要去掉怎么做呢？ \n\n## 全自定义菜单\n\u003e 不保留默认菜单，添加自己需要的菜单项。\n\n```javascript\nimport contextmenu from 'chimee-plugin-contextmenu';\nChimee.install(contextmenu);\nconst chimee = new Chimee({\n  wrapper: '#wrapper',\n  plugins: [{\n    name: contextmenu.name,\n    baseMenus: [], // 这里我们告诉插件，不需要基础菜单项，当然也用来定义想要的基础菜单项\n    menus: [\n      {\n        text: '暂停',\n        action: 'pause'\n      },\n      {\n        text: 'copyright 360 vs: {VERSION}',\n        disable: true\n      },\n      {\n        text: '我是一个新窗口打开的连接',\n        url: 'http://chimee.org'\n      }\n    ]\n  }]\n});\n```\n\n效果示例：\n\n![](https://p3.ssl.qhimg.com/dr/600__/t01e0f5dd57e220e60b.png)\n\n欢迎使用、反馈您的建议。\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchimeejs%2Fchimee-plugin-contextmenu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchimeejs%2Fchimee-plugin-contextmenu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchimeejs%2Fchimee-plugin-contextmenu/lists"}