Video ended 属性

什么是 ended 属性

ended 是 HTML5 视频元素（<video>）的一个属性，它表示视频是否已经播放结束。当视频播放到最后一帧时，ended 属性的值会变为 true，这时我们就可以根据这个属性值来执行相应的操作。

如何使用 ended 属性

要使用 ended 属性，我们需要先获取到视频元素，然后监听 ended 事件。下面是一个简单的示例代码：

// www.javascriptcn.com code example
<video id="myVideo" src="video.mp4" controls></video>

<script>
const video = document.getElementById('myVideo');

video.addEventListener('ended', function() {
  // 在视频播放结束时执行一些操作
  console.log('视频播放结束');
});
</script>

在上面的示例中，我们首先获取了 id 为 myVideo 的视频元素，然后通过 addEventListener 方法监听了 ended 事件。当视频播放结束时，控制台会输出 视频播放结束。

实际应用场景

除了简单的输出日志外，我们还可以在视频播放结束时执行更复杂的操作，比如自动播放下一个视频、显示相关推荐视频等。下面是一个更实际的示例代码：

// www.javascriptcn.com code example
<video id="myVideo" src="video.mp4" controls></video>

<div id="relatedVideos" style="display: none;">
  <h3>相关推荐视频</h3>
  <ul>
    <li><a href="video2.mp4">视频 2</a></li>
    <li><a href="video3.mp4">视频 3</a></li>
    <li><a href="video4.mp4">视频 4</a></li>
  </ul>
</div>

<script>
const video = document.getElementById('myVideo');
const relatedVideos = document.getElementById('relatedVideos');

video.addEventListener('ended', function() {
  // 在视频播放结束时显示相关推荐视频
  relatedVideos.style.display = 'block';
});
</script>

在这个示例中，当视频播放结束时，相关推荐视频会显示出来，用户可以选择继续观看其他视频。

总结

通过 ended 属性，我们可以方便地处理视频播放结束时的事件，从而为用户提供更好的观看体验。在实际开发中，我们可以根据具体需求来使用这个属性，执行不同的操作。希望本文能够帮助你更好地理解和应用 ended 属性。