最简可用的video标签需提供有效src并添加controls属性，如不支持提示；注意本地file://协议受限、格式兼容性、CORS及MIME类型等问题。
直接用 <video></video> 标签就能嵌入本地或网络视频，但浏览器是否能播、是否自动加载、能否控制播放，全取决于你传了哪些属性和资源路径是否合法。
怎么写最简可用的 <video></video> 标签
只要提供一个有效的 src（本地路径或 HTTP/HTTPS URL），再加 controls 属性，用户就能点开播放：
<video src="movie.mp4" controls> 您的浏览器不支持 video 标签。 </video>
注意：src 必须指向真实可访问的文件。本地开发时双击 HTML 文件打开（file:// 协议）可能被 Chrome/Firefox 阻止加载本地 .mp4，此时需用本地服务器（如 python3 -m http.server）启动页面。
- 推荐始终包含
controls，否则默认无播放控件，用户无法操作 - 若想默认静音+自动播放（比如背景视频），必须同时加
muted和autoplay，否则现代浏览器会拒绝自动播放音频 -
width和height建议显式设置，避免页面布局抖动
为什么加了 src 还是黑屏/报错？
常见原因不是代码写错，而是资源本身或加载策略出问题：
立即学习“前端免费学习笔记（深入）”；
- 网络视频地址返回 404 或跨域（CORS）错误：检查浏览器开发者工具 Network 面板中
movie.mp4请求状态码和响应头Access-Control-Allow-Origin - 本地视频路径写成相对路径但位置不对：比如 HTML 在
/pages/index.html，而视频放在/videos/clip.mp4，则src应写../videos/clip.mp4，不能漏掉.. - 视频编码格式不被支持：Chrome/Firefox 支持
MP4 (H.264 + AAC)最稳；WebM (VP8/VP9 + Vorbis/Opus)是开源首选；Safari 对 HEVC 支持较好，但 MP4 仍是兼容性底线 - 服务器没配对视频 MIME 类型：确保 Web 服务器返回
Content-Type: video/mp4，否则部分浏览器拒绝解析
怎么支持多格式回退（fallback）？
用 <source></source> 子标签代替单个 src，浏览器按顺序尝试，遇到第一个能解码的就用：
<video controls width="640" height="360"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> <p>您的浏览器不支持该视频格式。</p> </video>
关键点：
-
type属性必须准确，比如video/mp4不能写成video/mpeg4或漏掉 - 不要在
<video></video>上再写src，否则会忽略所有<source></source> - 建议把 MP4 放第一个——兼容性最广；WebM 放第二——开源浏览器友好；如有 OGV 可放最后（已基本淘汰）
怎么控制预加载行为和初始状态？
preload 和 autoplay 组合决定页面加载后的行为：
-
preload="none"：完全不预加载，节省流量，适合列表页大量缩略视频 -
preload="metadata"（默认）：只加载时长、尺寸、首帧，足够显示控件和封面 -
preload="auto"：尽可能预加载全部内容——但实际是否执行由浏览器决定，移动端通常忽略 -
autoplay必须配合muted才能在多数浏览器生效；单独写autoplay在 Chrome 66+ 会被静音拦截 - 加
loop可循环播放，加poster可指定封面图（如poster="cover.jpg"）
真正难的是平衡用户体验和性能：自动播放吸引眼球，但也可能消耗用户流量；预加载提升响应速度，却增加首屏负载。这些没有标准答案，得看你的场景——是产品介绍页？还是后台监控视频流？
