如何禁用video标签右键菜单部分选项（参考deeplearning.ai）

要实现像deeplearning.ai那样修改video右键菜单，核心思路是替换浏览器原生右键菜单为自定义菜单——因为浏览器不允许直接修改原生菜单的部分选项。具体实现步骤如下：

1. 阻止原生右键菜单弹出 #

给video元素绑定contextmenu事件，调用preventDefault()阻止默认行为，让原生菜单不再弹出：

const video = document.querySelector('video');
video.addEventListener('contextmenu', (e) => {
  e.preventDefault();
  // 后续显示自定义菜单
});

2. 创建自定义右键菜单 #

先在HTML中添加自定义菜单结构，默认隐藏：

<div id="customVideoMenu" style="display: none; position: fixed; background: #fff; border: 1px solid #ccc; border-radius: 4px; padding: 8px 0; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 9999;">
  <div class="menu-item" data-action="playPause">播放/暂停</div>
  <div class="menu-item" data-action="muteToggle">静音/取消静音</div>
  <div class="menu-item" data-action="fullscreen">全屏</div>
  <!-- 只保留需要的选项，去掉下载、复制地址等不需要的功能 -->
</div>

添加CSS美化菜单样式：

.menu-item {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
}
.menu-item:hover {
  background-color: #f0f0f0;
}

3. 控制菜单的显示与交互 #

在contextmenu事件中根据鼠标位置显示菜单，同时处理菜单选项的点击逻辑，以及页面其他区域点击时隐藏菜单：

const customMenu = document.getElementById('customVideoMenu');
const menuItems = customMenu.querySelectorAll('.menu-item');

// 右键点击视频时显示自定义菜单
video.addEventListener('contextmenu', (e) => {
  e.preventDefault();
  customMenu.style.left = `${e.pageX}px`;
  customMenu.style.top = `${e.pageY}px`;
  customMenu.style.display = 'block';
});

// 点击菜单选项执行对应操作
menuItems.forEach(item => {
  item.addEventListener('click', () => {
    const action = item.dataset.action;
    switch(action) {
      case 'playPause':
        video.paused ? video.play() : video.pause();
        break;
      case 'muteToggle':
        video.muted = !video.muted;
        break;
      case 'fullscreen':
        if (!document.fullscreenElement) {
          video.requestFullscreen().catch(err => {
            console.log(`全屏失败: ${err.message}`);
          });
        } else {
          document.exitFullscreen();
        }
        break;
    }
    customMenu.style.display = 'none';
  });
});

// 点击页面其他区域隐藏菜单
document.addEventListener('click', (e) => {
  if (!customMenu.contains(e.target) && e.target !== video) {
    customMenu.style.display = 'none';
  }
});

补充方案：仅禁用特定原生选项 #

如果只需要禁用少量原生选项（比如下载），可以使用controlslist属性，兼容性有限但实现简单：

<video controls controlslist="nodownload"></video>

这个属性支持的参数包括nodownload、nofullscreen、noremoteplayback，但无法自定义菜单内容，适合需求简单的场景。

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