Bootstrap站点HTML video右键新标签页打开选项禁用 求解决方案

首先你代码里写的target="_blank"对<video>标签无效，该属性仅支持<a>、<form>等跳转类元素，可以直接删除该冗余属性。右键「在新标签页中打开」禁用核心是浏览器没有识别到这是可交互的视频元素，你可以用以下两种方式修复：

方案1：添加controls属性（可接受显示默认控制条时用） #

直接给<video>标签增加controls属性即可，修改后代码如下：

<video autoplay class="header-index__video" loop muted playsinline controls
       src="assets/video/Home.mp4" style="width:100%"></video>

添加该属性后浏览器会将其识别为可交互视频元素，右键菜单的视频相关选项会自动启用。

方案2：隐藏控制条保留右键能力（不需要显示控制条时用） #

如果你的视频是背景类用途不需要显示控制条，可以先加controls属性，再用CSS隐藏控制条即可：

/* 适配webkit内核浏览器（Chrome、Edge、Safari等） */
.header-index__video::-webkit-media-controls,
.header-index__video::-webkit-media-controls-enclosure {
  display: none !important;
}
/* 适配火狐浏览器 */
.header-index__video::-moz-media-controls {
  display: none !important;
}

额外排查项 #

如果以上操作后仍未生效，检查项目的JS代码中是否存在全局/针对video元素的右键拦截逻辑，类似以下代码需要移除：

// 拦截了全局右键的代码会导致所有元素右键菜单异常
document.addEventListener('contextmenu', e => e.preventDefault())

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