谷歌瀏覽器中的全屏模式不起作用

通過點擊我的全屏按鈕，視頻延伸至原始大小，但不以全屏顯示。但我不想在兩邊以上的黑色酒吧。沒有使用的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

谷歌瀏覽器中的全屏模式不起作用

回答

相關問題