HTML页面嵌入视频与JS控制切换视频示例详解-前端开发

HTML页面嵌入视频与JS控制切换视频示例详解

HTML页面嵌入视频与JS控制切换视频示例详解

HTML页面中嵌入视频是网页制作一个比较基础的功能，在现代网站中，视频的应用越来越广泛，这里我们将介绍如何嵌入视频，并用JS控制切换视频的方法。

嵌入视频

HTML5中嵌入视频，可以使用video标签实现，示例代码如下：

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

其中，src属性用于指定视频的路径和文件名，controls属性用于显示播放器的控制面板（如：播放/暂停、音量、进度条等）。如果要在其他浏览器上兼容，可以在video标签中添加type属性。

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

JS控制切换视频

在嵌入视频的基础上，使用JavaScript代码来控制视频的播放和切换。

<video id="myVideo" src="video1.mp4" type="video/mp4" controls></video>
<button onclick="changeVideo()">切换视频</button>

以上代码中，我们在视频标签中添加了一个id属性，并在按钮中定义了一个onclick事件，调用changeVideo()函数切换视频。

接下来，我们使用JS代码实现changeVideo()函数：

function changeVideo() {
  var video = document.getElementById("myVideo");
  if (video.src.includes("video1.mp4")) {
    video.src = "video2.mp4";
  } else {
    video.src = "video1.mp4";
  }
  video.load();
}

以上代码中，我们使用了document.getElementById()方法获取视频标签对象，通过判断当前视频文件路径，切换视频。

示例说明

下面是一个切换两个视频的完整示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>视频切换示例</title>
</head>
<body>
  <video id="myVideo" src="video1.mp4" type="video/mp4" controls></video>
  <button onclick="changeVideo()">切换视频</button>
  <script>
    function changeVideo() {
      var video = document.getElementById("myVideo");
      if (video.src.includes("video1.mp4")) {
        video.src = "video2.mp4";
      } else {
        video.src = "video1.mp4";
      }
      video.load();
    }
  </script>
</body>
</html>

在该示例中，我们通过video标签嵌入了一个初始视频，并在按钮中定义了一个onclick事件，当点击按钮时调用changeVideo()函数切换视频文件路径。

除了上面的示例，我们也可以实现多个视频的循环播放。示例如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>视频切换示例</title>
</head>
<body>
  <video id="myVideo" src="video1.mp4" type="video/mp4" controls autoplay onended="changeVideo()"></video>
  <script>
    function changeVideo() {
      var video = document.getElementById("myVideo");
      if (video.src.includes("video1.mp4")) {
        video.src = "video2.mp4";
      } else if (video.src.includes("video2.mp4")) {
        video.src = "video3.mp4";
      } else {
        video.src = "video1.mp4";
      }
      video.load();
      video.play();
    }
  </script>
</body>
</html>

在该示例中，我们在视频标签中添加了autoplay和onended属性，用于实现多个视频的循环播放。当视频播放结束后，调用changeVideo()函数切换到下一个视频文件路径，并重新加载和播放视频。