html视频播放结束如何处理_html视频播放结束事件监听-html教程-PHP中文网

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

雪夜

发布： 2025-10-07 12:20:02

原创

843人浏览过

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

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

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

监听视频播放结束事件

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

基本语法：

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

登录后复制

常见处理方式

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

BibiGPT-哔哔终结者

B站视频总结器-一键总结音视频内容

查看详情

立即学习“前端免费学习笔记（深入）”；

显示提示信息：通知用户视频已结束，例如“播放完毕，感谢观看”。
自动重播：调用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>

登录后复制

基本上就这些，关键是正确绑定ended事件并避免重复监听。确保视频资源加载完成后再绑定事件，可放在loadedmetadata或直接写在<script>末尾。不复杂但容易忽略细节。

以上就是html视频播放结束如何处理_html视频播放结束事件监听的详细内容，更多请关注php中文网其它相关文章！