右键菜单

在播放容器右键时展示菜单列表，点击列表内dom时会在插件实例上广播UIContextMenuPlugin.CLICK_EVENT事件，事件参数为dom.dataset。

引入

先用start方法设置面板内容（有默认值），然后监听点击事件执行操作即可；由于复制是一个常用的操作，插件提供对应了copy方法，但需要在点击时执行（浏览器限制）。

import { H5Player } from '@tencent/thumbplayer-h5';
import { UIContextMenuPlugin } from '@tencent/thumbplayer-plugin-ui-contextmenu';

const player = new H5Player({ container: '#demo', plugins: [UIContextMenuPlugin.pluginName] });
const ctxmenu = player.plugins[UIContextMenuPlugin.pluginName];

ctxmenu.start({
  { role: 'videoInfo', label: '视频信息' },
  { role: 'copyCurrentPageUrl', label: '复制视频页面地址' },
  { role: 'copyCurrentTimePageUrl', label: '复制当前时间的页面地址' },
  { role: 'copyPlayerVersion', label: '视频信息' },
});
ctxmenu.on(UIContextMenuPlugin.CLICK_EVENT, ({ data }) => {
  switch (data.role) {
    case 'copyCurrentPageUrl':
      const pageurl = `https://v.qq.com/x/page/${vid}.html`;
      ctxmenu.copy(pageurl);
      break;
  }
})

默认start参数

label是展示的文案，role会以data-role设置在dom上

[
  { role: 'videoInfo', label: '视频信息' },
  { role: 'copyCurrentPageUrl', label: '复制视频页面地址' },
  { role: 'copyCurrentTimePageUrl', label: '复制当前时间的页面地址' },
]

配置

new H5Player({ 
  container: '#demo', 
  plugins: [
    [UIContextMenuPlugin.pluginName, { disableSuccussTip: false }],
  ],
});

插件API

copy

▸ copy(text: string): void

Parameters:

Name	Type
text	string

Returns: void

---

destroy

▸ destroy(): void

Returns: void

---

hide

▸ hide(): void

Returns: void

---

show

▸ show(): void

Returns: void

---

showSuccess

▸ showSuccess(): void

Returns: void

---

start

▸ start(items?: { label: string = '视频信息'; role: string = 'videoInfo' }[]): void

Parameters:

Name	Type
items	{ label: string = '视频信息'; role: string = 'videoInfo' }[]

Returns: void