html视频播放结束如何处理_html视频播放结束事件监听

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

html视频播放结束如何处理_html视频播放结束事件监听

2025-10-07

浏览次数：次

返回列表

视频播放结束时可通过监听ended事件实现交互功能。使用J*aScript为video元素绑定ended事件，可在播放完毕后执行如提示信息、自动重播、跳转页面或展示推荐内容等操作。需确保事件绑定在资源加载完成后，避免重复监听。示例代码展示了基本用法，关键在于正确触发和处理ended事件，以提升用户体验。

html视频播放结束如何处理_html视频播放结束事件监听

HTML视频播放结束时，可以通过监听ended事件来执行相应操作。这个事件在视频播放完成到最后帧时自动触发，开发者可以利用它实现自动跳转、推荐内容、重播视频等交互功能。

监听视频播放结束事件

使用J*aScript为<video></video>元素绑定ended事件监听器，即可捕获播放结束状态。

基本语法：

const video = document.getElementById('myVideo');
video.addEventListener('ended', function() {
  // 视频播放结束后要执行的操作
  console.log('视频已播放完毕');
});

常见处理方式

在ended事件触发后，可以根据业务需求进行多种处理：

青泥AI

青泥学术AI写作辅助平台

360 查看详情青泥AI

显示提示信息：通知用户视频已结束，例如“播放完毕，感谢观看”。
自动重播：调用video.play()重新开始播放，适合宣传类视频。
跳转到其他页面或视频：使用window.location.href或切换视频源video.src。
展示推荐内容或按钮：动态插入下一个视频链接或相关推荐。

完整示例代码

以下是一个简单完整的HTML示例：

<video id="myVideo" width="640" controls>
  <source src="example.mp4" type="video/mp4">
  您的浏览器不支持视频标签。
</video>

<script>
  const video = document.getElementById('myVideo');
  video.addEventListener('ended', function() {
    alert('视频播放结束！');
    // 可替换为其他逻辑，如：
    // video.play(); // 重播
    // window.location.href = '/next-page.html';
  });
</script>