HTML 如何检测 HTML5 视频播放结束

在本文中，我们将介绍如何使用 HTML 和 JavaScript 来检测 HTML5 视频播放是否结束。HTML5 提供了 <video> 元素用于在网页中嵌入视频，并且我们可以通过 JavaScript 监听视频的 ended 事件来判断视频是否播放完成。

阅读更多：HTML 教程

HTML5 <video> 元素介绍

HTML5 的 <video> 元素允许我们在网页中直接播放视频，代替了以往使用插件或 Flash 等技术播放视频的方式。在使用 <video> 元素时，我们可以通过一些属性和方法来控制视频的播放。

src 属性

src 属性指定了视频文件的 URL，用于告诉浏览器从哪里加载视频文件。例如：

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

autoplay 属性

autoplay 属性表示视频加载完成后自动开始播放。例如：

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

controls 属性

controls 属性表示会显示默认的视频播放控制器，包括播放/暂停按钮、音量控制、进度条等。例如：

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

监听 HTML5 视频播放结束事件

当我们需要在视频播放结束后执行某些操作时，可以通过 JavaScript 监听视频的 ended 事件。以下是一个示例：

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

<script>
  // 获取视频元素
  var video = document.getElementById("myVideo");

  // 监听视频播放结束事件
  video.addEventListener("ended", function() {
    // 在视频播放结束后执行一些操作
    console.log("视频播放完成");
  });
</script>

在上面的示例中，我们使用 addEventListener 方法来给视频元素添加 ended 事件的监听器。当视频播放结束时，事件监听器中的回调函数将会被执行，并输出 “视频播放完成”。

使用 JavaScript 控制视频播放

除了监听视频播放结束事件，我们还可以通过 JavaScript 控制视频的播放和暂停。HTML5 视频提供了一些方法供我们操作视频元素。

play() 方法

play() 方法用于播放视频。例如：

video.play();

pause() 方法

pause() 方法用于暂停视频的播放。例如：

video.pause();

currentTime 属性

currentTime 属性表示视频的当前播放时间，我们可以通过修改该属性的值来实现视频跳转到指定的时间点。例如：

// 跳转到视频的第 10 秒处
video.currentTime = 10;

示例应用：检测视频是否循环播放

在一些特定场景下，我们可能需要判断视频是否循环播放，以便在循环播放完成后执行一些操作。下面的示例演示了如何检测视频是否循环播放：

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

<script>
  // 获取视频元素
  var video = document.getElementById("myVideo");

  // 监听视频播放结束事件
  video.addEventListener("ended", function() {
    // 获取视频是否循环播放的属性值
    var isLooping = video.getAttribute("loop");

    if (isLooping) {
      // 在视频循环播放完成后执行一些操作
      console.log("视频循环播放完成");
    }
  });
</script>

在上面的示例中，我们给 <video> 元素添加了 loop 属性，表示视频会循环播放。通过获取 loop 属性的值，我们可以判断视频是否循环播放完成，并执行相应的操作。

总结

通过 HTML 和 JavaScript，我们可以简单实现检测 HTML5 视频播放是否完成的功能。使用 <video> 元素和 ended 事件，我们可以监听视频的播放结束，并在需要时执行特定操作。同时，我们还可以使用 JavaScript 控制视频的播放和暂停，以及跳转到指定的时间点。希望本文对你理解和应用 HTML5 视频播放结束事件有所帮助。