HTML5 视频不会在 Chrome 中以全屏模式隐藏控件答案

【问题标题】：HTML5 video does not hide controls in fullscreen mode in ChromeHTML5 视频不会在 Chrome 中以全屏模式隐藏控件
【发布时间】：2025-12-10 11:45:01
【问题描述】：

在 Google chrome 浏览器中，当我更改为鼠标移动时显示的全屏 mod 标准控件时。也总是在右键菜单上启用功能显示控制（仅在全屏上），我无法禁用它。所以我托盘这个js功能，但他们不工作。 JS：

$('.gp_nav_fc').click(function() {
    elem = $('#bcVideo')[0];
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
         elem.webkitRequestFullscreen();
    }
    $('.gp_buttons').attr('class', 'gp_buttons fullscreen');
        elem.controls = false;
        $('#bcVideo')[0].removeAttribute("controls");
        $('#bcVideo').controls = false;
});

HTML：

<video id="bcVideo" src="anotherhost.com/video.mp4" style="position: absolute;" poster="poster.gif"></video>

我将 src 课程更改了很长时间，但视频来自另一个域。

【问题讨论】：

你能显示一些代码（超过两行）吗？
看起来禁用全屏控件被覆盖了。
看起来这个属性被chrome全屏屏蔽了。所以在 ff 和 chrome normal mod（不是全屏）中一切都很好。
如果你想让它们全屏隐藏，你必须创建自己的控件。

标签： javascript html google-chrome

【解决方案1】：

所以我找到了这个问题的答案。

在css中需要添加下一条规则：

video::-webkit-media-controls {
  display:none !important;
}

【讨论】：