不能——浏览器安全策略禁止直接加载本地 file:// 资源；必须通过 HTTP 服务（如 Live Server）或 Web 服务器部署，且 src 路径需相对 HTML 文件，同时确保编码格式为 H.264+AAC 并正确设置 controls、preload、poster 等属性。

HTML5 标签能直接播放本地文件吗？

不能——浏览器出于安全限制， 在 Chrome、Edge 等主流浏览器中会静默失败，控制台报错 Not allowed to load local resource。这不是代码写错了，是浏览器策略，本地双击 HTML 文件打开时必然触发。

解决办法只有两个：

• 用本地 HTTP 服务启动页面（推荐）：比如 VS Code 装 Live Server 插件，右键“Open with Live Server”，地址变成 http://127.0.0.1:5500/xxx.html，此时 src="./demo.mp4" 就能正常加载
• 把 HTML 和视频文件一起部署到真实 Web 服务器（Nginx/Apache）或托管平台（Vercel/GitHub Pages）

的 src 路径怎么写才不 404？

路径必须相对于 HTML 文件位置，不是相对于当前 JS 或 CSS 文件，也不是相对于浏览器地址栏显示的路径。常见错误包括：

• 视频在 ./videos/intro.mp4，HTML 在根目录 → 正确写法：src="videos/intro.mp4"
• HTML 在 /pages/index.html，视频在 /assets/clip.webm → 正确写法：src="../assets/clip.webm"（注意向上一级）
• 用绝对路径要小心：以 / 开头表示网站根目录，src="/media/showreel.mp4" 指的是 https://yoursite.com/media/showreel.mp4，不是你本地的 C:\project\media\...

网络视频（如 MP4 链接）为什么点开没画面？

不是所有公开链接都支持直接嵌入播放。关键看服务器是否允许跨域（CORS），以及是否提供 Accept-Ranges 支持流式加载。典型现象：

立即学习“前端免费学习笔记（深入）”；

• Chrome 控制台报错 Failed to load resource: net::ERR_FAILED 或 Blocked by CORS policy
• 视频卡在加载图标，进度条不动，network 面板里看到请求状态是 cancelled

验证方式：把视频 URL 粘贴进浏览器地址栏，如果能直接下载或播放，再检查响应头是否有 Access-Control-Allow-Origin: *；没有就无法用 直接加载。

临时调试可用 ，但治标不治本——源头服务器不配 CORS，前端加属性无效。

最简可用的 写法和必要属性

只写 很可能什么也不显示：默认无尺寸、无控件、不自动播放（且现代浏览器禁止无交互自动播放音频）。

建议至少带上这四个属性：

• controls：显示原生播放控件（必加，否则用户没法操作）
• width / height：指定尺寸，避免布局抖动（可只设一个，另一个按比例自适应）
• preload="metadata"：只预加载元信息（时长、封面），减少首屏带宽消耗
• poster="cover.jpg"：视频加载前显示的封面图（推荐加，提升体验）

注意： 是为了兼容不同编码格式，MP4（H.264 + AAC）覆盖最广，WebM（VP9 + Opus）适合现代浏览器节省体积；type 属性必须写对，否则浏览器可能跳过该源。

真正容易被忽略的点：视频编码格式比容器格式（.mp4/.webm）更重要。用 FFmpeg 转码时，别只改后缀，要确认输出是 H.264+AAC —— 否则即使路径全对， 也会静默失败，控制台连错误都不报。