如何在全屏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

最后，我找到了解决此问题的方法。正如 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>

JavaScript :

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);

Answer 2

这可以通过CSS解决,如下所述:HTML5视频不会在Chrome中以全屏模式隐藏控件

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