vscode点“运行”按钮打不开html，因缺live server插件；安装ritwick dey版后右键选“open with live server”或点右下角“go live”，启用http://127.0.0.1:5500服务才能正常运行音视频、fetch等api。
VSCode 里点“运行”按钮打不开 HTML？先装 Live Server
VSCode 本身不带 HTTP 服务，直接双击或按 F5 打开 HTML 文件会走 file:// 协议，导致 <video></video>、<audio></audio> 的 autoplay 失效，fetch 报 CORS，localStorage 在部分浏览器下不可用。这不是你写错了，是缺了关键插件。
去扩展市场搜 Live Server（作者 Ritwick Dey），安装后右键 HTML 文件 → Open with Live Server，或点右下角绿色 Go Live 按钮。它起的是真实 http://127.0.0.1:5500/xxx.html 地址，所有多媒体 API 才能正常工作。
- 别手动配
launch.json走调试流程——除非你要断点 JS，否则纯属绕路 - 如果右下角没出现
Go Live，重启 VSCode 或检查插件是否启用 - 端口被占时会自动换到 5501，状态栏会提示新端口，不用手动改配置
HTML 音视频标签在 Live Server 下仍不自动播放？加 muted 和格式兜底
Chrome、Edge、Firefox 现代版本默认禁止有声自动播放，但允许静音自动播放。所以 <video autoplay></video> 单独写一定失败；必须加 muted 才能触发自动播放逻辑。
音频不支持 muted 自动播放兜底，所以 <audio autoplay></audio> 基本等于摆设，建议改成交互式触发（比如按钮点击）。
-
<video autoplay muted loop controls></video>是最稳妥的自动播放组合 - 务必用
<source></source>多格式提供：MP4（H.264+AAC）兼容性最好，再加 WebM（VP8/VP9）覆盖 Firefox/Chrome 开源版 - 写成
<source src="vid.mp4" type="video/mp4"></source>，别漏type属性，否则 Safari 可能跳过该源 - 海报图用
poster属性：<video poster="loading.jpg"></video>，避免白屏
相对路径在 Live Server 下 404？搞清根目录和 ./ 的区别
Live Server 默认把 VSCode 当前打开的**文件夹**作为 Web 根目录（/），不是 HTML 文件所在子目录。比如你在 /project/src/index.html 里写 <video src="demo.mp4"></video>，浏览器实际请求的是 http://127.0.0.1:5500/demo.mp4，而不是 .../src/demo.mp4。
- 资源放错位置就会 404，检查开发者工具 Network 面板看请求地址是否符合预期
- 快速修复：统一用
./显式声明当前目录，如src="./demo.mp4" - 项目结构深时，可在
加<base href="./">锁定基准 URL，避免每个链接都补./ - 别在 HTML 里写 Node.js 路径变量（如
__dirname），浏览器里根本不存在
想测 TRTC 等实时音视频 SDK？别在 Live Server 上直接跑
腾讯云 TRTC、声网 Agora、即构 ZEGO 这类 SDK 要求 HTTPS 或 localhost（127.0.0.1）才能获取摄像头/麦克风权限。Live Server 启的 http://127.0.0.1:5500 是合法的，可以跑基础 demo。
但注意：TRTC 官方 Web Demo 默认依赖 https://，本地调试需手动改 SDK 初始化逻辑，或用 npx serve -s（支持 HTTPS 本地服务）替代。
- 先确认 SDKAppID 和密钥已填对，且应用已开通对应地域的推拉流权限
- Chrome 浏览器地址栏左上角必须显示“已允许使用摄像头和麦克风”，否则调用
createLocalStream会静默失败 - TRTC 的
trtc-js-sdkv4+ 已移除对file://的兼容，强行用 Live Server 以外的方式打开必报NotAllowedError: Permission denied - 真机调试 iOS Safari 时，
localhost不被信任，得用127.0.0.1+ 端口，并确保设备和电脑在同一局域网
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
