如何禁用全屏HTML5视频的默认控件？ [英] How to disable default controls on a full screen HTML5 video?

问题描述

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

 < video id =videoIdwidth =320height =240 autoplay =autoplayondblclick =enterFullScreen（'videoId'）src =Blah.mp4>< / video> 
  

并且 enterFullScreen（...）函数的定义如下：

pre $ function enterFullScreen（elementId）{
var element = document.getElementById（elementId）;
element.webkitRequestFullScreen（）;
element.removeAttribute（controls）;

$ / code>

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

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

解决方案

最后，我找到了解决方法。
正如Alexander Farkas所建议的那样，我将视频包裹在另一个div中，我将这个父div设置为全屏，之后我将视频的高度和宽度设置为 screen.height 和 screen.width 。而且我在退出全屏时恢复了这两个div的原始属性。

伪代码：

HTML：

 < div id =videoContainerstyle =position：absolute; background-color：黑;> 
< video id =videoIdstyle =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）{
 //在此情况下恢复CSS属性，如下所示：
 var element = document.getElementById（'videoId'）; 
 element.style.height = 240; 
 element.style.width = 320; 
} 
 }，false）; 
  

I have a video of a specified width and height, double clicking on which makes it go full screen using videoElement.webkitRequestFullScreen(). By default the video does not have any controls. But for some reason, on going full screen, the default controls pop up. Here is what I'm doing :

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

And the enterFullScreen(...) function is defined as :

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

As you can see, I've already tried removing the controls in the function. But to no avail.

Could someone tell me how to prevent this auto insertion of default controls from happening?

解决方案

Finally, I found a way around this. As Alexander Farkas suggested, I wrapped the video in another div, and I set this parent div to go full screen, after which I set the height and width of the video to screen.height and screen.width respectively. And I restored the original properties of both the divs on exiting full screen.

Pseudo Code :

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

这篇关于如何禁用全屏HTML5视频的默认控件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！