如何禁用全屏 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");
}

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

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

原文由 Vishnu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

最后，我找到了解决这个问题的方法。正如 Alexander Farkas 所建议的那样，我将视频包装在另一个 div 中，并将此父 div 设置为全屏显示，之后我将视频的高度和宽度设置为 screen.height 和 screen.width 分别。我在退出全屏时恢复了两个 div 的原始属性。

伪代码：

HTML :

 <div id="videoContainer" style="position:absolute;background-color:black;">
     <video id="videoId" style="height:240;width:320;" ondblclick="enterFullScreen('videoId')" src="movie.mp4"></video>
</div>

脚本：

 function enterFullScreen(id) {
    var element = document.getElementById(id);
    element.parentNode.webkitRequestFullScreen();
    element.style.height = screen.height;
    element.style.width = screen.width;
}
document.addEventListener("webkitfullscreenchange", function () {
    if(!document.webkitIsFullScreen) {
        // Restore CSS properties here which in this case is as follows :
        var element = document.getElementById('videoId');
        element.style.height=240;
        element.style.width=320;
    }
    }, false);

原文由 Vishnu 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

原文由 user1702401 发布，翻译遵循 CC BY-SA 3.0 许可协议