最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - HTML5 video does not hide controls in fullscreen mode in Chrome - Stack Overflow

programmeradmin1浏览0评论

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/video.mp4" style="position: absolute;" poster="poster.gif"></video>

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

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.

Share Improve this question edited Aug 16, 2013 at 10:31 user2633669 asked Aug 16, 2013 at 10:11 user2633669user2633669 2853 silver badges10 bronze badges 4
  • 1 Can you show some code (more than the two lines)? – putvande Commented Aug 16, 2013 at 10:18
  • Looks like the disabling of the controls in fullscreen gets overridden. – putvande Commented Aug 16, 2013 at 10:52
  • It looks like this property blocked in full screen by chrome. So in ff and chrome normal mod (not full screen) everything good. – user2633669 Commented Aug 16, 2013 at 11:05
  • It looks like you have to create your own controls if you want them to be hidden in fullscreen. – putvande Commented Aug 16, 2013 at 11:08
Add a comment  | 

1 Answer 1

Reset to default 20

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/

发布评论

评论列表(0)

  1. 暂无评论