HTML HTML5视频如何全屏显示

在本文中，我们将介绍如何通过HTML5实现视频全屏显示的方法。

阅读更多：HTML 教程

使用`requestFullscreen`方法

HTML5提供了一个requestFullscreen方法，可以将网页元素全屏显示。我们可以通过JavaScript来调用这个方法，将视频元素全屏。

示例代码

<!DOCTYPE html>
<html>
<body>

<video id="myVideo" controls>
  <source src="video.mp4" type="video/mp4">
</video>

<script>
var video = document.getElementById("myVideo");

function toggleFullscreen() {
  if (video.requestFullscreen) {
    video.requestFullscreen();
  } else if (video.mozRequestFullScreen) { // Firefox
    video.mozRequestFullScreen();
  } else if (video.webkitRequestFullscreen) { // Chrome, Safari and Opera
    video.webkitRequestFullscreen();
  } else if (video.msRequestFullscreen) { // IE/Edge
    video.msRequestFullscreen();
  }
}
</script>

<button onclick="toggleFullscreen()">Toggle fullscreen</button>

</body>
</html>

在上述代码中，我们创建了一个video元素，并给它添加了一个id属性和controls属性，以便能够对视频进行控制。

然后我们使用了JavaScript来获取这个video元素，并定义了一个toggleFullscreen函数。这个函数中，我们首先检查浏览器是否支持requestFullscreen方法，如果支持，就直接调用该方法；如果不支持，我们就检查其他浏览器的全屏方法，并依次调用。

最后，我们在页面上添加了一个按钮，调用toggleFullscreen函数，以切换视频全屏显示。

使用`fullscreen`API

除了上述的全屏方法之外，HTML5还提供了一个fullscreenAPI，可以用来判断网页是否处于全屏状态，并监听全屏事件。

示例代码

<!DOCTYPE html>
<html>
<body>

<video id="myVideo" controls>
  <source src="video.mp4" type="video/mp4">
</video>

<script>
var video = document.getElementById("myVideo");

video.addEventListener("fullscreenchange", function() {
  if (document.fullscreenElement) {
    console.log("进入全屏");
  } else {
    console.log("退出全屏");
  }
});
</script>

</body>
</html>

在上述代码中，我们添加了一个fullscreenchange事件监听器，当进入或退出全屏时，会触发这个事件。在事件处理函数中，我们通过判断document.fullscreenElement属性是否存在来确定当前页面是否处于全屏状态。

对于进入全屏和退出全屏，我们可以根据实际需求进行相应的操作。

隐藏浏览器控件

在默认情况下，全屏状态下会显示浏览器的控件，比如播放按钮、全屏按钮等。如果我们希望在全屏时隐藏掉这些控件，可以使用CSS的display属性。

示例代码

<!DOCTYPE html>
<html>
<body>

<video id="myVideo" controls>
  <source src="video.mp4" type="video/mp4">
</video>

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

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

video::-webkit-media-controls-panel {
  display:none !important;
}
</style>

</body>
</html>

在上述代码中，我们使用了CSS的display属性来隐藏了Webkit内核浏览器（如Chrome和Safari）中的控件。如果需要隐藏Firefox或其他浏览器的控件，可以参考相应的浏览器文档。