HTML5视频音频循环播放技巧

想让HTML5视频或音频在网页中无缝、稳定地自动循环播放？本文全面解析四种实用方案：最简捷的原生loop属性、更灵活可控的ended事件监听、支持交互切换的setAttribute动态控制，以及兼顾浏览器兼容性（尤其是Chrome和iOS Safari）的muted+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），否则可能被浏览器拒绝。

到这里，我们也就讲完了《HTML5视频音频循环播放技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！