如何获取悬浮画中画（Picture-in-Picture）窗口的鼠标事件？

核心思路 #

画中画（PiP）窗口本身仅支持resize事件，但你可以通过监听document的pictureinpictureclick事件捕获悬浮窗口的点击操作，再结合坐标转换得到Canvas内部的鼠标位置，同时通过事件对象获取按键状态。

1. 捕获画中画窗口的点击与按键状态 #

pictureinpictureclick事件会在用户点击PiP窗口时触发，事件对象包含鼠标按键状态和屏幕位置信息：

document.addEventListener('pictureinpictureclick', (event) => {
  // 获取按键状态：0=左键，1=中键，2=右键
  const isLeftClick = event.button === 0;
  const isRightClick = event.button === 2;
  
  // 获取鼠标在屏幕上的绝对位置
  const screenX = event.screenX;
  const screenY = event.screenY;

  // 处理点击逻辑
  handlePipInteraction(screenX, screenY, isLeftClick);
});

2. 转换鼠标位置到Canvas坐标系 #

由于PiP窗口的尺寸可能和原Canvas不一致，需要计算缩放比例，将屏幕坐标转换为Canvas内部坐标：

let pipWindowInstance;

// 开启画中画时保存窗口实例
async function enablePictureInPicture() {
  pipWindowInstance = await video.requestPictureInPicture();
}

function handlePipInteraction(screenX, screenY, isLeftClick) {
  if (!pipWindowInstance) return;

  // 获取PiP窗口的屏幕位置与尺寸
  const pipLeft = pipWindowInstance.left;
  const pipTop = pipWindowInstance.top;
  const pipWidth = pipWindowInstance.width;
  const pipHeight = pipWindowInstance.height;

  // 计算鼠标在PiP窗口内的相对位置
  const pipRelX = screenX - pipLeft;
  const pipRelY = screenY - pipTop;

  // 获取原Canvas的尺寸
  const canvasWidth = canvas.width;
  const canvasHeight = canvas.height;

  // 计算缩放比例（假设Canvas与Video等比例适配）
  const scaleX = canvasWidth / pipWidth;
  const scaleY = canvasHeight / pipHeight;

  // 转换为Canvas内部坐标
  const canvasX = pipRelX * scaleX;
  const canvasY = pipRelY * scaleY;

  // 检测是否点击了Canvas上的按钮
  checkCanvasButton(canvasX, canvasY, isLeftClick);
}

function checkCanvasButton(x, y, isLeftClick) {
  // 示例：检测(50,50)-(150,100)区域的按钮
  if (isLeftClick && x >= 50 && x <= 150 && y >= 50 && y <= 100) {
    console.log("Canvas按钮被点击");
    // 执行你的按钮交互逻辑
  }
}

3. 注意事项 #

• 目前浏览器仅支持pictureinpictureclick事件，没有直接的鼠标移动事件监听，若需实时位置只能通过定时检测鼠标全局位置，体验有限。
• 确保Canvas与Video的显示比例一致（比如设置video.style.objectFit = 'contain'），避免坐标转换出现偏差。
• event.buttons属性可用于检测多个按键同时按下的状态（比如左键+右键），对应值为各按键的二进制位组合。

内容的提问来源于stack exchange，提问作者TranquilMarmot