HTML HTML5视频延迟5秒后自动播放

在本文中，我们将介绍如何使用HTML5视频在延迟5秒后自动播放。

阅读更多：HTML 教程

使用autoplay属性

HTML5中的<video>元素提供了autoplay属性，该属性用于在页面加载完成后自动播放视频。但是，如果想要延迟5秒后再自动播放视频，我们需要结合JavaScript来实现。

首先，让我们来创建一个基本的HTML5视频元素：

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

在上面的代码中，我们创建了一个<video>元素，设置了宽度和高度，并添加了一个<source>元素来指定视频文件的路径和类型（这里是mp4格式）。

接下来，我们需要使用JavaScript来实现延迟5秒后自动播放视频的功能。

使用setTimeout函数

我们可以使用JavaScript中的setTimeout函数来在一定的时间延迟后执行特定的代码。

首先，让我们来创建一个播放视频的函数，并在其中使用setTimeout函数来延迟播放：

function playVideo() {
  var myVideo = document.getElementById("myVideo");
  setTimeout(function() {
    myVideo.play();
  }, 5000); // 5000毫秒即5秒
}

在上面的代码中，我们使用document.getElementById方法来获取<video>元素，然后使用setTimeout函数来在5秒后执行播放操作。

现在，我们需要调用这个函数，以便在页面加载完成后开始延迟播放视频。我们可以在标签的onload事件中调用此函数：

<body onload="playVideo()">

当页面加载完成后，playVideo函数将被调用，并在5秒后自动播放视频。

示例

下面是一个完整的示例，演示了延迟5秒后自动播放视频的功能：

<!DOCTYPE html>
<html>
<head>
  <title>Delay Auto Play Video</title>
</head>
<body onload="playVideo()">

  <h1>HTML5视频延迟5秒后自动播放</h1>

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

  <script>
    function playVideo() {
      var myVideo = document.getElementById("myVideo");
      setTimeout(function() {
        myVideo.play();
      }, 5000); // 5000毫秒即5秒
    }
  </script>

</body>
</html>

请确保video.mp4文件存在于与HTML文件相同的目录中。

在上面的示例中，页面加载完成后会调用playVideo函数，并在5秒后自动开始播放名为video.mp4的视频。