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 事件兜底——但后者的手动控制点,比如错误捕获和时序微调,最容易被跳过。










