Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 video does not hide controls in fullscreen mode in Chrome

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.

like image 498
2 revs, 2 users 86% Avatar asked Aug 16 '13 10:08

2 revs, 2 users 86%


People also ask

How do I hide controls in HTML video?

We can hide the controls by not adding the controls attribute to the video element. Even without controls attribute on the elements the user can view the controls section by right-clicking on the video and enabling the show controls .

How do I force HTML full screen?

Full-screen can be activated for the whole browser window by pressing the F11 key. It can be exited by pressing the Esc button.


1 Answers

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/

like image 139
2 revs, 2 users 86% Avatar answered Nov 15 '22 20:11

2 revs, 2 users 86%