HTML 自动开始视频 - HTML

在 HTML 中，我们可以使用 <video> 标签来嵌入视频。如果我们想要视频自动开始播放，我们可以使用 autoplay 属性。在本文中，我们将介绍如何在 HTML 中自动开始视频。

使用 autoplay 属性

要在 HTML 中自动开始视频，我们可以在 <video> 标签中添加 autoplay 属性。如下所示：

<video src="video.mp4" autoplay></video>

当页面加载时，视频将自动开始播放。

隐藏视频控件

如果我们希望将视频控件隐藏，并使视频自动开始播放，我们可以在 <video> 标签中添加 controls 和 autoplay 属性，并使用 CSS 隐藏控件。如下所示：

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

<video src="video.mp4" controls autoplay></video>

使用上面的 CSS，我们可以将视频控件隐藏。请注意，这对于所有现代浏览器都适用。但是，可能会出现一些浏览器兼容性问题。

在全屏模式下自动播放

如果我们希望在浏览器进入全屏模式时自动开始播放视频，我们可以使用 requestFullscreen 方法和 fullscreenchange 事件。如下所示：

<script>
  function playVideoInFullscreen() {
    var video = document.getElementById("myVideo");
    video.play();
    video.requestFullscreen();
  }

  document.addEventListener("fullscreenchange", function() {
    var video = document.getElementById("myVideo");
    if (!document.fullscreenElement) {
      video.pause();
    }
  });
</script>

<video id="myVideo" src="video.mp4"></video>

<button onclick="playVideoInFullscreen()">Play Video in Fullscreen</button>

上面的代码将在浏览器进入全屏模式时自动开始播放，而在退出全屏模式时自动停止播放。

结论

在 HTML 中自动开始视频可能很简单，但要确保视频在所有设备和浏览器中正常工作可能需要一些调整。通过使用 autoplay 属性和一些额外的 CSS 和 JavaScript，我们可以使我们的视频按照我们的需求自动播放，而不需要用户手动操作。