谷歌浏览器中的全屏模式不起作用

通过点击我的全屏按钮，视频延伸至原始大小，但不以全屏显示。但我不想在两边以上的黑色酒吧。没有使用的CSS属性可以解释这一点。要将视频属性设置为width: 100%;和height: 100%;或自动没有帮助。全屏在Firefox中完美工作，但不是Chrome。我用此代码进入全屏模式：谷歌浏览器中的全屏模式不起作用

$('.fullscreen-btn').click(function() { 
      if (movie[0].requestFullscreen) { 
       movie[0].requestFullscreen(); 
      } else if (movie[0].mozRequestFullScreen) { 
       movie[0].mozRequestFullScreen();    

      } else if (movie[0].webkitRequestFullscreen) { 
       movie[0].webkitRequestFullscreen(); 
      } 
      ... 
});

有没有人知道如何解决这个问题？

来源

2014-01-08 user2718671

这确实有点代码，以帮助您有...得到任何jFiddle？页面的HTML？ –

Thx抱歉，不能这样做。我发现如果启用了默认控件，它就可以工作。但我想用我自己的控制。它甚至可以在你点击全屏按钮（调整到视频大小），小屏幕按钮（调整到播放器大小）并再次单击全屏按钮（然后调整到全屏）时起作用。真奇怪。但似乎还有更多问题。有时在关闭视频后Chrome会崩溃。 – user2718671

找到了解决方案！问题是Chrome的默认html5视频控件和我的自定义控件之间存在冲突。由于这个问题的回答：hide video controls in fullscreen mode 我发现这个问题是通过使用CSS规则解析：

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

来源

2014-01-08 09:52:18 user2718671

我可以知道是否可以通过android chrome上的javascript制作html5播放器全屏吗？我测试过它，并且可以在iPhone上运行，但不能在android chrome上显示！你知道为什么吗？ – user1788736

嘿！我认为“被称为Immersive模式”（自Android 4.4以来）是一个很大的魔术词。但我没有任何经验，但我猜你会发现一些当你谷歌;） – user2718671

不工作。发送给我另一个@ user2718671 – Sharvan

谷歌浏览器中的全屏模式不起作用

回答

相关问题