HTML5如何監聽video的全屏和退出全屏？

王铁柱6發表於2024-12-09
HTMLIDE

在HTML5中，你可以使用fullscreenchange事件來監聽video元素的全屏和退出全屏操作。 這個事件在全屏狀態改變時觸發，無論是由使用者操作（例如按下F11或點選全屏按鈕）還是由JavaScript程式碼觸發。

以下是如何使用JavaScript監聽fullscreenchange事件的示例：

const videoElement = document.getElementById('myVideo');

videoElement.addEventListener('fullscreenchange', (event) => {
  if (document.fullscreenElement) {
    // 進入了全屏模式
    console.log("Entered fullscreen mode");
    // 在這裡執行進入全屏後的操作，例如隱藏其他UI元素
  } else {
    // 退出了全屏模式
    console.log("Exited fullscreen mode");
    // 在這裡執行退出全屏後的操作，例如恢復隱藏的UI元素
  }
});


//  下面的程式碼演示瞭如何使用JavaScript觸發全屏和退出全屏

// 進入全屏
function enterFullscreen() {
  if (videoElement.requestFullscreen) {
    videoElement.requestFullscreen();
  } else if (videoElement.mozRequestFullScreen) { /* Firefox */
    videoElement.mozRequestFullScreen();
  } else if (videoElement.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    videoElement.webkitRequestFullscreen();
  } else if (videoElement.msRequestFullscreen) { /* IE/Edge */
    videoElement.msRequestFullscreen();
  }
}


// 退出全屏
function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) { /* Firefox */
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE/Edge */
    document.msExitFullscreen();
  }
}

// 為按鈕新增點選事件監聽器
const enterFullscreenButton = document.getElementById('enterFullscreen');
const exitFullscreenButton = document.getElementById('exitFullscreen');

if (enterFullscreenButton) {
  enterFullscreenButton.addEventListener('click', enterFullscreen);
}

if (exitFullscreenButton) {
  exitFullscreenButton.addEventListener('click', exitFullscreen);
}

HTML示例:

<!DOCTYPE html>
<html>
<head>
<title>Fullscreen Test</title>
</head>
<body>

<video id="myVideo" width="640" height="360" controls>
  <source src="your_video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<button id="enterFullscreen">Enter Fullscreen</button>
<button id="exitFullscreen">Exit Fullscreen</button>

<script src="your_script.js"></script> </body>
</html>

關鍵點:

  • document.fullscreenElement: 這個屬性返回當前處於全屏模式的元素。如果沒有任何元素處於全屏模式，則返回null。 這可以用來判斷當前是否處於全屏狀態。
  • 瀏覽器相容性: requestFullscreen 和 exitFullscreen 方法以及 fullscreenElement 屬性都有瀏覽器特定的字首版本。 上面的程式碼包含了這些字首，以確保在不同的瀏覽器中都能正常工作。 你也可以使用一些庫來簡化處理瀏覽器相容性的程式碼。
  • fullscreenchange 事件: 這個事件在 document 物件上觸發。 這意味著即使全屏的元素在 iframe 中，你仍然可以在父頁面中監聽這個事件。

這個更完整的示例演示瞭如何進入和退出全屏，以及如何處理瀏覽器相容性問題。 記住將 your_video.mp4 替換為你實際的影片檔案，並將 your_script.js 替換為包含 JavaScript 程式碼的檔名。

希望這個解釋能夠幫助你!

相關文章