HTML视频控件Bug求助：多视频场景下更多选项菜单位置错误

问题根源 #

浏览器原生视频控件的「更多选项」菜单（Kebab菜单）是全局单例元素，当页面存在多个preload="false"的视频时，菜单会默认以最后加载完成的视频控件为定位基准，导致点击其他视频的菜单时，位置错误出现在最后加载的视频框架内。

解决方案 #

方法1：JavaScript动态修正菜单位置 #

通过监听视频菜单按钮的点击事件，手动将菜单的定位基准切换为当前点击的视频元素：

// 获取所有preload=false的视频元素
const videos = document.querySelectorAll('video[preload="false"]');

videos.forEach(video => {
  // 定位原生控件中的Kebab菜单按钮（以Chrome为例，不同浏览器需调整选择器）
  const menuButton = video.shadowRoot?.querySelector('media-controls > media-control-menu-button');
  if (!menuButton) return;

  menuButton.addEventListener('click', () => {
    // 获取全局的原生菜单容器
    const mediaMenu = document.querySelector('media-menu');
    if (!mediaMenu) return;

    // 获取当前视频控件的位置信息
    const controlsRect = video.shadowRoot.querySelector('media-controls').getBoundingClientRect();

    // 强制菜单相对于当前视频控件定位
    mediaMenu.style.position = 'fixed';
    mediaMenu.style.top = `${controlsRect.bottom + window.scrollY}px`;
    mediaMenu.style.left = `${controlsRect.right - mediaMenu.offsetWidth + window.scrollX}px`;
    mediaMenu.style.transform = 'none';
  });
});

说明：不同浏览器的原生视频控件DOM结构存在差异，需根据目标浏览器调整菜单按钮的选择器。如果使用的是自定义视频控件，需替换对应的按钮和菜单容器选择器。

方法2：CSS+JS结合强制菜单绑定父容器 #

先为每个视频元素包裹相对定位的容器：

<div class="video-container">
  <video preload="false" src="your-video-source.mp4" controls></video>
</div>

添加CSS样式，通过类名控制菜单的定位基准：

.video-container {
  position: relative;
  display: inline-block; /* 根据页面布局调整为block或其他值 */
}

/* 菜单激活时，强制相对于当前视频容器定位 */
.video-container.active media-menu {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  transform: none !important;
}

配合JS在点击菜单时给对应容器添加激活类，关闭时移除：

const videos = document.querySelectorAll('video[preload="false"]');
const mediaMenu = document.querySelector('media-menu');

videos.forEach(video => {
  const container = video.parentElement;
  const menuButton = video.shadowRoot?.querySelector('media-control-menu-button');
  if (!menuButton || !mediaMenu) return;

  menuButton.addEventListener('click', () => {
    // 清除其他容器的激活状态
    document.querySelectorAll('.video-container.active').forEach(el => el.classList.remove('active'));
    // 标记当前视频容器为激活状态
    container.classList.add('active');
  });

  // 菜单关闭时移除激活类
  mediaMenu.addEventListener('close', () => {
    container.classList.remove('active');
  });
});

方法3：替换为自定义视频控件 #

如果原生控件的兼容性问题难以调试，直接使用成熟的自定义视频控件库（如Video.js、Plyr），这类控件的菜单与各自的视频实例绑定，从根源避免全局定位冲突。

内容的提问来源于stack exchange，提问作者José Daniel Osorio Pacheco