9

我有一个指定宽度和高度的视频，双击它可以使用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");
}

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

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

4

5 回答 5

13

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

video::-webkit-media-controls {
  display:none !important;
}
于 2014-02-08T22:09:04.143 回答
7

最后，我找到了解决这个问题的方法。正如 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);
于 2013-01-02T05:53:55.090 回答
1

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

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

element.parentNode.webkitRequestFullScreen();
于 2012-12-31T20:48:14.547 回答
0

您可以找到包含控件的 div 的 id 并使用 javascript 禁用它。例如，如果包含控件的 div 的 id 是“controldiv”，那么您可以在函数中编写

var ctrls = document.getElementById("controldiv");
ctrls.disabled="true";
于 2012-12-31T13:11:34.417 回答
0

通常以下应该工作：

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

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

于 2012-12-31T16:48:56.507 回答