在Chrome中，HTML5视频不会隐藏全屏模式下的控件 [英] HTML5 video does not hide controls in fullscreen mode in Chrome

问题描述

在Google Chrome浏览器中，当我更改为全屏模式时，显示鼠标移动的标准控件。也一直启用功能显示控制右键菜单（只在全屏幕），我不能禁用它。所以我托盘这个js功能，但他们不工作。
JS：

  $（'。gp_nav_fc'）。click（function（）{
 elem = $（'＃bcVideo'）[0]; 
 if（elem.requestFullscreen）{
 elem.requestFullscreen（）; 
} else if（elem.mozRequestFullScreen）{
 elem .mzRequestFullScreen（）; 
} else if（elem.webkitRequestFullscreen）{
 elem.webkitRequestFullscreen（）; 
} 
 $（'。gp_buttons'）。attr（'class' ，'gp_buttons fullscreen'）; 
 elem.controls = false; 
 $（'＃bcVideo'）[0] .removeAttribute（controls）; 
 $（'＃bcVideo'） .controls = false; 
}）; 
  

HTML：

 < video id =bcVideosrc =anotherhost.com/video.mp4style =position：absolute;海报= poster.gif >< /视频> 
  

我改变src的时间很长，但视频从另一个域获得。

解决方案

所以我找到了这个问题的答案。

在CSS中需要添加下一条规则：

  video： -  webkit-media-controls {
 display：none！important; 
} 
  

更多链接信息：http://css-tricks.com/custom-controls-in-html5-video-full-screen/

In Google chrome browser when I change to full screen mod standard controls showing when mouse move. Also always enabled function show control on right click menu (only on full screen), I can't disabled it. So I tray this js functions but they not working. JS:

$('.gp_nav_fc').click(function() {
    elem = $('#bcVideo')[0];
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
         elem.webkitRequestFullscreen();
    }
    $('.gp_buttons').attr('class', 'gp_buttons fullscreen');
        elem.controls = false;
        $('#bcVideo')[0].removeAttribute("controls");
        $('#bcVideo').controls = false;
});

HTML:

<video id="bcVideo" src="anotherhost.com/video.mp4" style="position: absolute;" poster="poster.gif"></video>

I change src course it very long, but video getting from another domain.

解决方案

So I find answer for this question.

In css need to add next rule:

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

more information on link: http://css-tricks.com/custom-controls-in-html5-video-full-screen/

这篇关于在Chrome中，HTML5视频不会隐藏全屏模式下的控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！