如何在 HTML 中正确实现视频自动播放（autoplay）

作者：袖梨 2026-08-16

HTML 视频自动播放需满足静音（muted）条件，否则现代浏览器会因策略限制阻止播放；本文详解 autoplay 失效原因、合规写法、JavaScript 动态加载方案及关键注意事项。

在现代 Web 浏览器（Chrome、Firefox、Safari、Edge）中，<video autoplay> 并非“只要写了就播”——它受严格的媒体自动播放策略（Autoplay Policy） 约束：为提升用户体验与节省带宽/电量，浏览器默认禁止带有音频的视频自动播放，除非明确标记为静音（muted）且可播放（playsinline）。

正确的基础 HTML 写法如下（无需 JS 即可生效）：

<video autoplay muted loop playsinline width="380" style="border-radius: 30px;"><source src="./video/NEZAJA.mp4" type="video/mp4">您的浏览器不支持该视频格式。</video>

关键属性说明：

muted：强制必需。即使视频本身无音频轨道，也建议显式声明，避免策略误判；
playsinline：iOS Safari 和部分 Android 浏览器要求此属性，防止全屏跳转；
autoplay + loop 组合仅在 muted 存在时才被允许触发自动播放；
移除 <a> 下载链接等冗余内容（如原代码中的 Download the...），避免干扰语义与可访问性。

? 若需通过 JavaScript 动态加载并插入视频（如你的 fetch 方案），需注意以下三点：

仍需 muted 属性：动态创建的 <video> 元素同样受策略约束；
确保 DOM 插入后立即调用 play()（推荐）：部分浏览器对 autoplay 属性响应延迟，主动调用更可靠；
处理 play() Promise 拒绝：用户交互未发生或策略拒绝时，play() 会抛出错误，应优雅降级。

优化后的 JS 示例：

async function loadAndPlayVideo() {try {const response = await fetch('./video/NEZAJA.mp4');if (!response.ok) throw new Error('视频加载失败');const blob = await response.blob();const videoUrl = URL.createObjectURL(blob);const video = document.createElement('video');video.autoplay = true;video.muted = true;// ✅ 静音是硬性前提video.loop = true;video.playsInline = true; // 注意：HTML 属性名是 playsinline，JS 属性为 playsInlinevideo.width = 380;video.style.borderRadius = '30px';const source = document.createElement('source');source.src = videoUrl;source.type = 'video/mp4';video.appendChild(source);// 可选：添加备用文案video.innerHTML += '<p style="text-align:center; margin:8px 0; font-size:14px;">视频加载中...</p>';// 插入到目标容器（假设 notice 已存在）const notice = document.getElementById('notice') || document.body;notice.appendChild(video);// 主动调用 play() 并捕获异常await video.play().catch(e => {console.warn('自动播放被阻止，可能需要用户交互触发：', e.message);// 可在此显示“点击播放”按钮作为降级方案});} catch (err) {console.error('视频加载或播放失败：', err);}}// 页面 DOM 加载完成后执行document.addEventListener('DOMContentLoaded', loadAndPlayVideo);

? 总结与最佳实践：