HTML5如何监听video的全屏和退出全屏？

在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 代码的文件名。

希望这个解释能够帮助你!

posted @ 2024-12-09 06:11  王铁柱6  阅读(635)  评论(0)    收藏  举报