html5中play函数怎么循环播放_html5play函数循环设置法【教程】

play()函数不支持自动循环，需通过loop属性或ended事件手动实现；推荐优先使用loop属性，兼容性差时用ended事件重置currentTime并调用play()，注意处理promise拒绝和safari时序问题。

play() 函数本身不支持循环播放——它只是触发一次播放，循环逻辑必须由开发者手动控制。

为什么 play() 调用后不会自动循环

play() 是 htmlMediaElement 的方法，只负责启动/恢复播放，和 loop 属性无关。即使设置了 loop="true"，也得靠元素自身的属性机制，而不是调用 play() 实现循环。

真正有效的循环播放设置方式

直接使用原生 loop 属性最简单可靠：

• 或
• js 中动态启用：video.loop = true（注意不是 video.setAttribute('loop', '')，后者兼容性略差）
• 必须在 play() 之前或之后设置都有效，但建议在加载完成（loadeddata 或 canplay 事件后）再设，避免部分浏览器忽略早期设置

手动用 ended 事件实现循环的场景

当需要在循环前执行清理、切换资源、或兼容不支持 loop 属性的老版本 webview（如某些 android 4.x 内核）时，可用事件监听：

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

video.addEventListener('ended', () => {   video.currentTime = 0;   video.play().catch(e => console.warn('Auto-replay failed:', e)); });

注意点：

• play() 返回 Promise，需处理拒绝（例如用户手势限制导致自动播放被拦截）
• currentTime = 0 后立即 play()，在部分 Safari 版本中可能失败，可加 setTimeout(() => video.play(), 0) 微调时机
• 不要在 ended 里反复 load()，会重置全部状态，引发卡顿或请求重复

真正要循环，别指望 play() 自己扛；要么开 loop 属性，要么靠 ended 事件兜底——但后者的手动控制点，比如错误捕获和时序微调，最容易被跳过。