网页多媒体资源加载：HTML文档结构中Audio与Video的配置-html教程-PHP中文网

现代浏览器默认禁止有声媒体自动播放，需用muted+autoplay实现静音自动播放，或等待用户交互后调用play()；同时须确保mime类型正确、cors配置合规，并合理使用preload属性及处理play()返回的promise。

网页多媒体资源加载：html文档结构中audio与video的配置

Audio 和 Video 标签不自动播放，是因为浏览器策略限制

现代浏览器（Chrome、Firefox、Safari、Edge）默认禁止无用户交互触发的自动播放，尤其是带声音的 <audio></audio> 或 <video></video>。即使写了 autoplay，也大概率被忽略——这不是代码写错了，而是策略行为。

解决思路不是“绕过”，而是适配：用 muted + autoplay 组合可绕过静音类媒体的限制；若需有声自动播放，必须等用户首次点击/触摸后才调用 play() 方法。

<video autoplay muted></video> 在页面加载时可静音自动播放（桌面/移动端均支持）
<audio autoplay></audio> 即使加了 muted，部分 iOS Safari 仍可能拒绝，需监听 canplay 后手动 play()
不要在 DOMContentLoaded 里直接调 play()，应绑定到 click 或 touchstart 事件回调中

src 属性失效？优先检查 MIME 类型和 CORS 配置

资源加载失败但控制台无报错，或 Network 面板显示 206 Partial Content 却无法播放，大概率是服务端返回的 Content-Type 不匹配，或跨域未授权。

<audio src="sound.mp3"></audio> 要求服务器返回 Content-Type: audio/mpeg；<video src="clip.mp4"></video> 要求 video/mp4。类型错误会导致浏览器拒绝解码。

本地文件用 file:// 协议打开时，Chrome 会禁用 <audio>/<video></video></audio> 加载（CORS 策略），必须起本地 HTTP 服务（如 npx serve）
CDN 或跨域资源需服务端设置 Access-Control-Allow-Origin: *（或具体域名），否则 preload="metadata" 可能失败，导致 duration 为 NaN
MP4 视频建议同时提供 moov box 前置（用 ffmpeg -i in.mp4 -c copy -movflags +faststart out.mp4 优化）

preload 属性值选哪个，取决于用户场景和带宽预期

preload 不是“预加载就一定更快”，它影响的是浏览器是否主动请求资源、何时请求、请求多少字节。三个取值的行为差异明显：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

preload="none"：完全不预加载，首次 play() 才发起请求 —— 适合列表页大量媒体缩略项，避免浪费带宽
preload="metadata"：只拉取头部信息（时长、尺寸、编码格式），不下载主体 —— 适合需要显示 duration / poster / controls 的场景，兼容性最好
preload="auto"：浏览器自行决定是否预加载全部内容 —— 实际表现因 UA 而异；Chrome 桌面通常会预加载前几秒，iOS Safari 则基本忽略该值

注意：preload 对 src 是 blob URL 或 MediaSource 的情况无效，此时加载逻辑由 JS 完全控制。

用 JavaScript 控制播放时，Promise 拒绝必须显式处理

调用 play() 返回一个 Promise，失败时不抛异常，而是 reject —— 若不 .catch()，控制台会报 Uncaught (in promise) DOMException，且后续逻辑可能中断。

常见错误是写成 video.play(); 就结束，没管结果。尤其在自动播放被拒、网络中断、格式不支持时，Promise 必然 reject。

正确做法：video.play().catch(e => console.warn("Play failed:", e.name));
想降级处理？可在 reject 后切换到静音模式再试一次：video.muted = true; video.play();
不要在 loadstart 或 loadeddata 中直接 play()，这些事件不保证用户已交互，仍可能被策略拦截

最易被忽略的一点：iOS Safari 的 <video></video> 在非全屏状态下，即使用户点过屏幕，play() 仍可能因未满足“可见+用户触发”双重条件而失败——务必在 visibilitychange 或 scroll 后延迟重试，并检查 video.readyState 是否 ≥ 2。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！