如何像 youtube 一樣使用 html 和 javascript 全螢幕播放影片 (mp4)？

Question

如果您使用 Chrome 從 Android 造訪 m.youtube.com，當您觀看影片時，您會看到預覽（帶有播放按鈕覆蓋的靜態圖像）。當您單擊圖像時，影片將開始全螢幕顯示。我也希望這樣做。

Answer 1

requestFullscreen()對於給定的元素，您需要這樣做。你需要做類似的事情：

var elem = document.getElementById('myvideo');
elem.requestFullscreen();

更多相關資訊請參見https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api和https://stackoverflow.com/questions/6039909/html5-full-screen-video

讓我知道這是否適合您。

Answer 2

您可以參考以下範例。以下範例顯示了針對不同瀏覽器的不同程式碼。

<video controls id="myvideo">
  <source src="video1.mp4"></source>
</video>

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { 
  elem.msRequestFullscreen();
}