不能——浏览器安全策略禁止直接加载本地 file:// 资源；必须通过 HTTP 服务（如 Live Server）或 Web 服务器部署，且 src 路径需相对 HTML 文件，同时确保编码格式为 H.264+AAC 并正确设置 controls、preload、poster 等属性。
HTML5 <video> 标签能直接播放本地文件吗？
不能——浏览器出于安全限制，<video src="file:///xxx.mp4"> 在 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）
<video> 的 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: *；没有就无法用 <video> 直接加载。
临时调试可用 <video crossorigin="anonymous">，但治标不治本——源头服务器不配 CORS，前端加属性无效。
最简可用的 <video> 写法和必要属性
只写 <video src="xxx.mp4"></video> 很可能什么也不显示：默认无尺寸、无控件、不自动播放（且现代浏览器禁止无交互自动播放音频）。
建议至少带上这四个属性：
-
controls：显示原生播放控件（必加，否则用户没法操作） -
width/height：指定尺寸，避免布局抖动（可只设一个，另一个按比例自适应） -
preload="metadata"：只预加载元信息（时长、封面），减少首屏带宽消耗 -
poster="cover.jpg"：视频加载前显示的封面图（推荐加，提升体验）
<video width="640" height="360" controls preload="metadata" poster="cover.jpg"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> Your browser does not support the video tag. </video>
注意：<source> 是为了兼容不同编码格式，MP4（H.264 + AAC）覆盖最广，WebM（VP9 + Opus）适合现代浏览器节省体积；type 属性必须写对，否则浏览器可能跳过该源。
真正容易被忽略的点：视频编码格式比容器格式（.mp4/.webm）更重要。用 FFmpeg 转码时，别只改后缀，要确认输出是 H.264+AAC —— 否则即使路径全对，<video> 也会静默失败，控制台连错误都不报。
