HTML5视频循环播放方法详解

想让HTML5视频在网页中无缝循环播放？本文系统解析了四种实用方案：最简洁的原生loop属性、更灵活可控的ended事件监听重播、支持交互切换的setAttribute动态控制，以及兼顾浏览器兼容性的muted+autoplay+loop静音自动循环组合——无论你是追求代码极简、精细控制，还是应对iOS或Chrome等平台的自动播放限制，都能找到适配场景的可靠解法。

如果您希望在网页中实现 HTML5 视频或音频的自动重复播放，则可以通过原生属性或 JavaScript 编程方式达成。以下是几种可行的操作方法：

一、使用 loop 属性直接启用循环

HTML5 的

1、在

2、在

3、loop 属性可简写，无需赋值；但若需通过 JS 动态控制，可使用 element.loop = true 或 element.loop = false。

二、通过 JavaScript 监听 ended 事件触发重播

当媒体播放结束时，会触发 ended 事件，利用该事件可手动将 currentTime 重置为 0 并调用 play() 方法，从而实现精确可控的循环逻辑。

1、为 video 元素添加 id 属性以便获取：

2、编写脚本监听 ended 事件：document.getElementById('myVideo').addEventListener('ended', function() { this.currentTime = 0; this.play(); });

3、若需兼容部分移动端浏览器（如 iOS Safari），应在 play() 前检查是否处于用户交互上下文中，避免被静音策略拦截。

三、使用 setAttribute 动态启用或禁用 loop

通过 DOM 操作修改元素的 loop 属性状态，适用于需要根据用户操作切换循环模式的场景，例如点击按钮开启/关闭循环。

1、为 video 元素添加 id 和 controls 属性：

2、添加一个按钮并绑定点击事件：切换循环

3、定义 toggleLoop 函数：function toggleLoop() { const v = document.getElementById('ctrlVideo'); v.loop = !v.loop; }

四、结合 muted 和 autoplay 实现静音自动循环

部分浏览器（尤其是 Chrome 和 Safari）要求视频自动播放必须满足静音条件，因此在设置 autoplay 时同步启用 muted 和 loop，可确保页面加载即开始无缝循环。

1、在 video 标签中同时声明 autoplay、muted 和 loop：

2、注意：muted 属性必须显式存在，仅设置 volume = 0 不足以绕过自动播放限制。

3、若后续需取消静音，可在播放开始后通过 JS 设置 volume = 1，但需确保该操作由用户手势触发（如 click），否则可能被浏览器拒绝。

好了，本文到此结束，带大家了解了《HTML5视频循环播放方法详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！