浏览器直接双击打开html文件（file://协议）无法播放音视频，因安全策略禁止加载本地媒体；必须通过http服务器（如live server）运行在http://协议下，并使用相对路径引用文件、添加controls属性。
浏览器直接打开 HTML 文件就能播音视频，但必须满足路径和协议要求
本地双击 HTML 文件（file:// 协议）时，现代浏览器（Chrome、Edge、Firefox）会因安全策略禁止 <audio></audio> 和 <video></video> 加载本地音视频文件，即使文件在同一目录下。错误现象通常是控制台报 NotAllowedError: play() can only be initiated by user gesture 或静音/黑屏/404。
解决的核心是：让页面运行在 http:// 或 https:// 协议下，而非 file://。这不是代码问题，而是浏览器的跨源与自动播放限制。
- 最简方案：用 VS Code 安装
Live Server插件，右键 HTML 文件 → “Open with Live Server”，它会在http://127.0.0.1:5500/xxx.html启动服务 - 命令行替代：进入项目目录，运行
npx http-server（需先npm install -g http-server），然后访问http://localhost:8080 - 注意音视频文件路径必须是相对路径（如
./music.mp3）或绝对路径（/assets/video.mp4），不能写file:///Users/xxx/...
HTML 音视频标签本身要带 controls 属性，否则用户无法触发播放
很多初学者写 <video src="demo.mp4"></video>，结果页面空白——因为没加 controls，浏览器不显示控件，且默认静音、不自动播放。而 autoplay 在无用户交互时基本无效（尤其有声音的媒体）。
正确写法示例：
<video controls width="640" height="360"><source src="./clip.mp4" type="video/mp4"><source src="./clip.webm" type="video/webm"> Your browser does not support the video tag. </source></source></video><audio controls><source src="./song.mp3" type="audio/mpeg"><source src="./song.ogg" type="audio/ogg"></source></source></audio>
-
controls是刚需，否则用户点不了播放 -
autoplay+muted可能生效（如<video autoplay muted></video>），但带声音的autoplay几乎总被拦截 -
<source></source>标签提供多格式回退，避免因编码不支持导致空白；MP4（H.264+AAC）兼容性最好
在线沙箱平台（如 CodePen、JSFiddle）对音视频支持有限，别依赖它们跑真实媒体
CodePen 默认禁用 <video></video> 的 src 外链（CSP 策略），且不支持上传二进制文件。你贴一个 src="demo.mp4"，它根本找不到文件——因为沙箱里没有你的本地文件系统。
- 可行做法：把音视频文件上传到图床或静态托管（如 GitHub Pages、Vercel、Cloudflare Pages），用公开 URL 替代相对路径，例如
src="https://cdn.example.com/audio.wav" - JSFiddle 不支持上传文件，CodeSandbox 对
public/目录下的媒体文件支持较好（需放在public下再用/filename.mp3引用） - 真正想快速验证 HTML+音视频，本地起 HTTP 服务比折腾在线编辑器更可靠、更少意外
移动端 Safari 和 Chrome 对自动播放、play() 调用有额外限制
即使在 http:// 下，iOS Safari 要求：首次播放必须由用户点击等手势触发，且 play() 返回 Promise，必须处理拒绝（.catch(e => console.log(e))）。否则控制台可能静默失败，视频卡在第一帧。
- 不要在
DOMContentLoaded里直接调video.play()，改用按钮点击事件 - 如果非要程序化播放，确保元素已插入 DOM、有
controls、且未设muted=false（iOS 要求静音才允许自动播放） - 检查
video.readyState和video.networkState，常见问题如NETWORK_NO_SOURCE表示路径错或 MIME 类型不匹配
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
