HTML5视频不会在Chrome中以全屏模式隐藏控件

时间:2013-08-16 10:11:39

标签: javascript html5 google-chrome

在Google Chrome浏览器中,当我更改为全屏模式标准控件时显示鼠标移动。也总是启用右键菜单上的功能显示控制(仅在全屏幕上),我无法禁用它。所以我托盘这个js功能,但他们没有工作。 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>

我改变了src课程很长时间,但视频来自另一个域。

1 个答案:

答案 0 :(得分:15)

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

在css中需要添加下一条规则:

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

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