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

Answer 1

可以使用CSS解决这个问题，具体方法在这里描述：HTML5 video does not hide controls in fullscreen mode in Chrome

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

- user1702401

---

在我提出问题的时候，这个选项还没有可用。不过还是谢谢 :) - Vishnu

这将隐藏所有模式下的控件，而不仅仅是全屏模式。我找不到一种方法使其仅适用于全屏模式，因为似乎没有一个:fullscreen选择器可以在这些元素上起作用。 - riv

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

- Vishnu

Answer 3

如果视频进入全屏模式，用户代理应该显示控件，即使没有控件属性。

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

element.parentNode.webkitRequestFullScreen();

- alexander farkas

---

谢谢，但我已经尝试过这个了。这并不能解决问题，因为虽然父级div全屏了，但视频仍然保持原始分辨率。 你能告诉我为什么全屏视频必须有控件吗？没有办法去掉它吗？ 我正在显示一个直播流，拥有播放/暂停按钮和进度条似乎很荒谬。 - Vishnu

这是所有视频播放器脚本使用的解决方案。要更改全屏模式下视频的尺寸，只需使用CSS：width: 100％; height: 100％; - alexander farkas

好的，进入全屏模式后，该特定元素的原始高度和宽度属性不会受到影响。因此，即使我将视频的高度和宽度设置为100％，分辨率在进入全屏模式时仍然保持不变。您可以验证这一点。 - Vishnu

我解决了这个问题。我只需要调整CSS，确保子元素填满屏幕即可。谢谢 :) - Vishnu

Answer 4

你可以使用JavaScript查找包含控件的div的id并将其禁用。 例如，如果包含控件的div的id是“controldiv”， 则在函数中可以编写如下内容：

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

- Ankit

---

请问您如何查找包含控件的 div 的 id？ - Vishnu

你可以在Mozilla Firefox中使用Firebug或在IE中使用开发者工具。 或者，您可以在启动视频后使用视频页面的“查看源代码”功能，然后浏览HTML以查找div元素的ID。 - Ankit

这并不简单。在发布问题之前，我已经尝试过了。 - Vishnu

查看源代码可以显示原始的HTML文件，而不是当前的结构。您需要使用开发工具或在Firefox中突出显示该区域，右键单击并查看所选内容的源代码。 - JJJ

我在你提供的链接上只能看到“双击视频进入全屏模式”的字样，无法看到其他内容。你可以从这里http://flowplayer.org/下载最新的Flowplayer，并将其放置在你的HTML中，它是免费且高效的。 - Ankit

Answer 5

通常以下代码应该可以工作：

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

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

- Ian Devlin

---

很遗憾，它也覆盖了这个。 :( - Vishnu

可能就是这样。 - Ian Devlin

Answer 6

一个仅使用 CSS 的解决方案：

video::-webkit-media-controls-fullscreen-button {
  pointer-events: none;
  opacity: .5;
}

- Harshit Jaiswal

---

您的回答可以通过添加更多支持信息来改进。请[编辑]以添加进一步的细节，例如引用或文档，以便他人可以确认您的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Ethan