HTML中用<video>标签嵌入视频需设置controls、preload="metadata"、双格式source及poster等属性以确保跨浏览器稳定播放，autoplay须配合muted与用户交互才生效。
用 <video> 标签直接播放本地或远程视频
不需要框架、不引入 JS，纯 HTML 就能撑起基础播放界面。关键不是“能不能播”，而是“播得稳不稳、控不控制得住”。<video> 默认行为在不同浏览器里差异不小，比如 Safari 对 autoplay 极其严格，Chrome 在无用户交互时禁止自动播放带声音的视频。
推荐写法：
<video controls width="640" height="360" preload="metadata"> <source src="demo.mp4" type="video/mp4"> <source src="demo.webm" type="video/webm"> Your browser does not support the video tag. </video>
-
controls必加——没它就只有黑框，用户没法暂停/拖拽/调音量 -
preload="metadata"比auto更友好：只预加载时长、宽高、封面帧，不拉整个文件，尤其对大视频很关键 - 提供
.mp4和.webm双格式：覆盖 Chrome/Firefox/Safari 基本解码能力，避免白屏+报错Failed to load resource: net::ERR_CONTENT_DECODING_FAILED - 别省略
width和height：防止页面重排（reflow），尤其嵌在 Flex/Grid 布局里时尺寸跳变明显
让视频默认静音并自动播放（绕过浏览器限制）
想一上来就动、又不想用户点一下才播？必须满足两个硬条件：静音 + 用户已与页面有交互（如点击、滚动）。但很多落地页需要“首屏自启”，这时可提前绑定一次空点击事件来“激活”媒体策略。
最简可靠方案：
立即学习“前端免费学习笔记（深入）”；
<video autoplay muted loop playsinline> <source src="hero.mp4" type="video/mp4"> </video>
-
muted是autoplay能生效的前提，漏掉就会被浏览器静默拦截，控制台可能只显示DOMException: play() failed because the user didn't interact with the document first -
playsinline针对 iOS Safari：不让视频全屏弹出，保持在页面内播放（否则 iPhone 上点开就跳原生播放器） -
loop配合autoplay实现无缝循环，适合背景视频；但注意：若视频有音频（即使muted），部分安卓 WebView 仍可能拒绝循环 - 如果首次加载后仍不播，可在
window.onload或按钮点击后补一句video.play().catch(e => console.warn("play failed:", e))，捕获并观察具体错误类型
响应式尺寸和封面图（不用 JS 也能做）
视频宽高比固定，但容器宽度会变，硬写 width="640" 在手机上会溢出。CSS 能解决，但要注意 <video> 的 intrinsic size（固有尺寸）会影响布局流。
推荐组合：
<video controls poster="cover.jpg" style="width: 100%; height: auto;"> <source src="demo.mp4" type="video/mp4"> </video>
-
poster属性指定首帧封面图，在视频加载中、加载失败、或用户未点击播放前显示，提升视觉反馈；图片建议跟视频宽高比一致（如 16:9 → 1280×720），否则会被拉伸 -
style="width: 100%; height: auto;"让视频随父容器缩放，但仅适用于块级上下文；若父元素是display: flex，需额外加flex: 1或min-width: 0防止溢出 - 不要依赖
aspect-ratioCSS 属性做宽高比约束——Firefox 旧版、iOS 15.4 以下不支持，容易导致高度塌陷成一条线 - 如果封面图加载慢，可内联 base64 占位：
poster="data:image/svg+xml,%3Csvg..."，避免空白闪动
常见报错和对应检查点
视频打不开，八成不是代码写错，而是路径、编码、MIME 类型三者之一掉了链子。
-
404 Not Found：检查src路径是否相对正确，开发服务器是否托管了该文件（Vite/webpack 默认不托管public外的资源） -
ERR_BLOCKED_BY_RESPONSE：服务端返回了Content-Type: text/plain，而不是video/mp4；用 curl 或 Network 面板确认响应头Content-Type - 画面卡在第一帧、进度条不可拖：视频编码不兼容，优先用 H.264 + AAC 编码，命令行转码参考：
ffmpeg -i in.mov -c:v libx264 -crf 23 -c:a aac -b:a 128k out.mp4 - 安卓微信内置浏览器白屏：关闭“硬件加速”或强制添加
webkit-playsinline属性（虽已废弃但仍有作用）
极简不等于随便写，每个属性背后都有浏览器策略和兼容性账要算。最易被忽略的是服务端 MIME 配置和视频编码格式——这两项出问题，连 <video> 标签都还没开始解析，就已经失败了。
