如何实现音视频的循环播放_LOOP属性设置媒体重复逻辑-html教程-PHP中文网

html5 video/audio 的 loop 属性不可靠。它仅控制末尾跳回开头，不处理静音不循环、seek卡顿、解码中断等问题；ios safari 等浏览器存在兼容性缺陷，需监听 ended 事件 + currenttime = 0 + play().catch() 主动控制，并注意清理监听器、兜底 timeupdate、web audio 精确循环及 mse/ffmpeg 预处理。

如何实现音视频的循环播放_loop属性设置媒体重复逻辑

HTML5 `video` 和 `audio` 的 `loop` 属性真能可靠循环吗？

不能完全依赖。原生 loop 属性在部分浏览器（尤其是 Safari iOS）中存在静音状态下不触发循环、Seek 后卡顿、或首帧跳帧等问题。它只控制「播放器是否在末尾自动跳回开头」，不处理加载失败、解码中断、或用户手动拖拽后的状态同步。

实际项目中，更稳妥的方式是监听 ended 事件并主动调用 play()，同时配合错误恢复逻辑：

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

currentTime = 0 比单纯靠 loop 更可控，能绕过某些浏览器对 loop 的限制
必须加 .catch() —— iOS Safari 在非用户手势触发时会拒绝 play()
若媒体被静音或 muted，部分安卓 WebView 仍可能不触发 ended，需额外监听 timeupdate 做兜底

Web Audio API 实现精确音频循环：避开 `loop` 的精度缺陷

HTML5 audio.loop = true 的循环点存在毫秒级偏差，不适合节拍同步、游戏音效等场景。Web Audio API 的 AudioBufferSourceNode 提供更底层的控制：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

const source = audioCtx.createBufferSource();
source.buffer = audioBuffer;
source.loop = true;
source.loopStart = 0.5; // 单位：秒
source.loopEnd = 2.3;
source.connect(audioCtx.destination);
source.start();

loopStart/loopEnd 支持亚毫秒精度，且不受网络缓冲影响
注意：一旦设置 loop = true，就不能再调用 start() 多次；如需动态切循环区间，得新建 source
移动端需在用户手势后初始化 AudioContext，否则静音且无法恢复

FFmpeg + WebAssembly 方案：需要自定义循环逻辑时怎么切片？

当循环区间不是整文件（比如只循环视频中间 3 秒），前端直接操作 currentTime 容易因关键帧对齐失败导致花屏。此时应预处理媒体：

用 FFmpeg 提取循环段：ffmpeg -i in.mp4 -ss 12.4 -to 15.7 -c copy -avoid_negative_ts make_zero out-loop.mp4
-c copy 快但要求 -ss 对齐关键帧；如需帧精度，去掉 -c copy 并加 -fflags +genpts
生成的 out-loop.mp4 可安全启用原生 loop，避免运行时 seek 不稳定
若必须前端裁剪，优先用 MediaSource Extensions (MSE) 注入分段 ArrayBuffer，而非操作 currentTime

React/Vue 中管理循环状态：为什么不要在组件卸载时忽略 `ended` 监听器？

组件内注册的 ended 事件监听器若未清理，会在组件销毁后继续触发，造成内存泄漏或报错（如 play() on detached element）：

useEffect(() => {
  const handler = () => { /* ... */ };
  media.addEventListener('ended', handler);
  return () => media.removeEventListener('ended', handler); // 必须写
}, []);