html5视频无原生delay属性，延迟播放需用javascript在canplay事件后通过settimeout调用play()实现，须处理promise拒绝并确保用户交互或静音以满足自动播放策略。
HTML5 视频本身没有原生的 delay 属性或 playAfter 参数，无法直接“设置播放延迟几秒”。所谓“延迟播放”，实际是靠 JavaScript 控制 play() 调用时机实现的——本质是「推迟调用播放方法」，而非视频加载或解码层面的延迟。
用 setTimeout 延迟调用 play()
这是最直接、兼容性最好的做法。需确保视频已加载足够数据（避免触发 play() 失败），推荐在 canplay 或 loadeddata 事件后设置定时器：
<video id="myVideo" src="video.mp4" muted></video>
<script>
const video = document.getElementById('myVideo');
video.addEventListener('canplay', () => {
setTimeout(() => {
video.play().catch(e => console.warn('自动播放被阻止：', e));
}, 3000); // 延迟 3 秒
});
</script>
-
canplay表示至少有一帧可播放，比loadedmetadata更稳妥 - 必须处理
play()的 Promise 拒绝（尤其在未静音、用户未交互的页面中） - 不要在
DOMContentLoaded或load事件里直接setTimeout，此时视频可能尚未准备就绪，play()会静默失败
为什么不能用 preload="none" + currentTime 模拟延迟？
有人尝试先设 currentTime = 延迟秒数，再调 play()，期望“跳到那秒开始播”。这不可靠：
-
currentTime设置后不保证立即生效，尤其当视频未缓冲到目标位置时，会卡住或回退 - 即使设置成功，视觉上仍是“立刻播放”，只是从中间开始——不是“延迟几秒后才开始播放”
- 移动端 Safari 对
currentTime设置限制更严，常抛InvalidStateError
自动播放策略影响延迟逻辑的实际效果
Chrome、Safari 等现代浏览器强制要求用户手势（如 click/tap）才能播放带声音的视频。这意味着：
立即学习“前端免费学习笔记（深入）”；
- 即使你写了
setTimeout(() => video.play(), 5000)，若页面没经历过用户交互，它大概率会失败并报NotAllowedError - 解决方案只有两个：加
muted属性（允许静音自动播放），或把延迟播放绑定在按钮点击之后 - 例如：用户点“开始体验”按钮，再过 2 秒播放视频，这样既合规又可控
真正要注意的不是“怎么写 delay”，而是“什么时候能安全调 play()”——得同时满足：视频就绪、用户权限许可、上下文允许。漏掉任意一环，延迟代码就只是摆设。
