Edge与IE浏览器中隐藏video标签的放大控件

嘿，我完全懂你遇到的糟心事——Edge（尤其是旧版基于EdgeHTML内核的）和IE里的原生video控件总是跳出放大按钮，而且右键点击这个按钮时，居然还能看到下载选项，哪怕你已经加了controlsList="nodownload"也不管用。别着急，给你几个实用的解决方案：

方案1：自定义视频控件（最稳妥的终极方案） #

原生控件在不同浏览器里的表现差异太大，不如直接自己做一套控件，完全掌控所有功能和样式。这样不仅能去掉讨厌的放大按钮，还能彻底避免右键下载的问题。

举个简单的实现示例：

<div class="custom-video-wrapper">
  <!-- 去掉原生的controls属性，我们自己做控件 -->
  <video width="320" height="240" poster="{{url($sTheme.'/images/xxxx.jpg')}}" preload="none" id="customVideo">
    <source src="{{url($sTheme.'/video/xxxx.mp4')}}" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  <!-- 自定义控件栏 -->
  <div class="custom-controls-bar">
    <button onclick="document.getElementById('customVideo').play()">▶️ 播放</button>
    <button onclick="document.getElementById('customVideo').pause()">⏸️ 暂停</button>
    <!-- 可以按需添加音量调节、进度条等其他控件 -->
  </div>
</div>

然后用CSS美化你的自定义控件，比如让控件栏悬浮在视频底部、调整按钮样式等等。这种方式完全脱离浏览器原生控件的限制，所有行为都由你说了算。

方案2：用CSS Hack隐藏特定浏览器的放大按钮 #

如果你不想大改代码，只想针对性隐藏放大按钮，可以试试针对IE和旧版Edge的CSS伪元素：

/* 隐藏IE中的视频全屏/放大按钮 */
video::-ms-media-controls-fullscreen-button {
  display: none !important;
}

/* 隐藏旧版Edge（EdgeHTML内核）中的全屏按钮 */
video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}

不过要注意：新版Edge是基于Chromium的，和Chrome行为一致，controlsList="nodownload"在新版里是有效的，但旧版Edge和IE完全不支持这个属性，所以右键下载的问题用这个方法解决不了。

方案3：禁用视频元素的右键菜单（应急方案） #

如果只是想临时阻止右键出现下载选项，可以给video元素添加右键禁用事件，但这会禁用整个视频区域的右键菜单，可能影响用户体验，谨慎使用：

<video width="320" height="240" controls controlsList="nodownload" 
       poster="{{url($sTheme.'/images/xxxx.jpg')}}" preload="none"
       oncontextmenu="return false;">
  <source src="{{url($sTheme.'/video/xxxx.mp4')}}" type="video/mp4">
  Your browser does not support the video tag.
</video>

总结 #

最推荐的还是方案1——自定义控件，既能解决当前的放大按钮和右键下载问题，还能保证所有浏览器的体验一致性，避免后续再遇到原生控件的各种兼容性坑。

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