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

Posted 2023-03-05

【中文标题】如何禁用全屏 HTML5 视频的默认控件？

【英文标题】：How to disable default controls on a full screen HTML5 video?

【发布时间】：2012-12-15 15:06:05

【问题描述】：

我有一个指定宽度和高度的视频，双击它可以使用videoElement.webkitRequestFullScreen() 全屏显示。 默认情况下，视频没有任何控件。但是由于某种原因，在全屏时，会弹出默认控件。这是我正在做的事情：

<video id="videoId"   autoplay="autoplay" ondblclick="enterFullScreen('videoId')" src="Blah.mp4"></video>

而enterFullScreen(...)函数定义为：

function enterFullScreen(elementId) 
    var element = document.getElementById(elementId);
    element.webkitRequestFullScreen();
    element.removeAttribute("controls");

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

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

【参考方案1】：

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

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

【讨论】：

在我提出问题时，此选项不可用。不过还是谢谢:)

这会隐藏所有模式下的控件，而不仅仅是全屏。我找不到使它仅适用于全屏的方法，因为 :fullscreen 选择器似乎都不适用于这些元素。

【参考方案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);

【参考方案3】：

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

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

element.parentNode.webkitRequestFullScreen();

【讨论】：

谢谢，但我已经尝试过了。这并不能解决问题，因为虽然父 div 进入全屏模式，但视频仍保持其原始分辨率。你能告诉我为什么控制在全屏视频上是强制性的吗？有没有办法去掉？这是我正在显示的直播，有播放/暂停按钮和搜索栏似乎很荒谬。

这是所有视频播放器脚本都使用的解决方案。要更改全屏视频的尺寸，只需使用 CSS： width: 100%;高度：100%；

好吧，在全屏显示时，该特定元素的原始高度和宽度属性不受影响。因此，即使我将视频的高度和宽度设置为 100%，分辨率在全屏时保持不变。您可以验证这一点。

我解决了这个问题。我只需要摆弄 CSS 以确保子元素填满屏幕。谢谢:)

【参考方案4】：

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

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

【讨论】：

你能告诉我如何找到包含控件的 div 的 id 吗？

你可以在mozilla firefox中使用firebug或者在IE中使用开发者工具。或者您可以在启动视频后使用视频页面的“查看源代码”，然后您必须遍历 html 找出 div 元素的 id。

没那么简单。在这里发布问题之前，我已经尝试过了。

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

你能给我一个链接到你的页面吗？

【参考方案5】：

通常以下应该可以工作：

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

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

【讨论】：

可悲的是，它也压倒了这一点:(

觉得可能是这样。