html实现video双击全屏播放

在HTML5中，<video>元素本身并没有双击全屏的功能，但你可以通过JavaScript来实现这一点。这里是一个简单的示例：

首先，创建一个简单的HTML页面，并添加<video>元素：

<!DOCTYPE html>
<html>
<head>
  <title>Video Double-Click to Fullscreen</title>
</head>
<body>
  <video id="myVideo" width="400" controls>
    <source src="your-video-file.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>

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

接下来，创建一个script.js文件，并添加以下JavaScript代码：

document.addEventListener("DOMContentLoaded", function() {
  const videoElement = document.getElementById("myVideo");

  videoElement.addEventListener("dblclick", function() {
    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();
    }
  });
});

这里，我们给<video>元素添加了一个dblclick（双击）事件监听器。当用户双击视频时，代码会尝试将视频设置为全屏。

这种方式兼容大多数现代浏览器，包括 Chrome、Firefox、Safari 和 IE/Edge。不过，请注意，全屏API可能因浏览器而异，这里已经尽量涵盖了各种情况。

将这个script.js文件链接到你的HTML页面，然后双击视频应该就能进入全屏模式了。