@lin-media/contextmenu v1.0.3

右键菜单

安装

npm i @lin-media/contextmenu

初始化

import MediaPlayer from "@lin-media/player";
import Contextmenu from "@lin-media/contextmenu";
MediaPlayer.use(Contextmenu);

const contextMenuList = [
  {
    label: "播放",
    desc: "描述信息",
    type: "MenuItem",
    callback: () => {
      player.play();
    },
    eventName: "click-play"
  },
  {
    label: "暂停",
    type: "MenuItem",
    callback: () => {
      player.pause();
    }
  },
  {
    label: "播放/暂停",
    type: "MenuItem",
    callback: () => {
      player.toggle();
    }
  },
  {
    type: "MenuLine"
  },
  {
    type: "SubMenuItem",
    label: "倍数",
    subMenuList: [
      {
        label: "0.5x",
        callback: () => {
          player.setSpeed(0.5);
        }
      },
      {
        label: "1x",
        callback: () => {
          player.setSpeed(1);
        }
      },
      {
        label: "1.5x",
        callback: () => {
          player.setSpeed(1.5);
        }
      }
    ]
  },
  {
    type: "SubMenuItem",
    label: "清晰度",
    subMenuList: [
      {
        label: "标清",
        callback: () => {
          player.switchDefinition(0);
        }
      },
      {
        label: "高清",
        callback: () => {
          player.switchDefinition(1);
        }
      }
    ]
  }
];
const player = new MediaPlayer({
  // ...
  Contextmenu: {
    // 一级菜单宽度
    menuItemWidth: "300px",
    // 二级菜单宽度
    subMenuItemWidth: "100px"
  }
});

player.$on("click-play", (item) => {
  console.log(item);
});

Contextmenu 参数

menuList 参数格式

菜单项分为三种格式，分别是：MenuItem，MenuItemLine，SubMenuItem

MenuItem：

MenuItemLine：

SubMenuItem：