html - 如何禁用全屏 HTML5 视频的默认控件？

Question

我有一个指定宽度和高度的视频，双击它可以使用 videoElement.webkitRequestFullScreen() 使其全屏显示。 默认情况下，视频没有任何控件。但出于某种原因，在全屏显示时，会弹出默认控件。这是我正在做的:

<video id="videoId" width="320" height="240" autoplay="autoplay" ondblclick="enterFullScreen('videoId')" src="Blah.mp4"></video>

enterFullScreen(...) 函数定义为:

function enterFullScreen(elementId) {
    var element = document.getElementById(elementId);
    element.webkitRequestFullScreen();
    element.removeAttribute("controls");
}

如您所见，我已经尝试删除函数中的控件。但无济于事。

有人能告诉我如何防止这种自动插入默认控件的情况发生吗？

Answer 1

这可以用 CSS 解决，如下所述:HTML5 video does not hide controls in fullscreen mode in Chrome

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