可通过loop属性、ended事件监听、setAttribute动态控制或muted+autoplay组合实现HTML5音视频自动循环；loop最简捷，ended事件更可控，动态切换适合交互场景，静音 autoplay loop 则保障自动播放兼容性。
如果您希望在网页中实现 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），否则可能被浏览器拒绝。
