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

Answer 2

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

如果视频全屏显示，则用户代理应显示控件，如果不存在控件属性，则显示控件。

较新的用户代理还支持任何元素的全屏API。因此，您可以尝试以下方法：

element.parentNode.webkitRequestFullScreen();

Answer 4

您可以找到包含控件的div的id，并使用javascript将其禁用。例如，如果包含控件的div的id是“controldiv” 然后在你的函数中你可以写

var ctrls = document.getElementById("controldiv");
ctrls.disabled="true";

Answer 5

通常以下情况应该有效：

var videoPlayer = document.getElementById('videoId');
videoPlayer.controls = false;

但我不确定跳到全屏模式是否会覆盖它。

如何在全屏HTML5视频上禁用默认控件？

5 个答案: