标签需配置正确src路径、controls属性和muted（autoplay时），并用多个提供mp4/webm/ogg格式及准确type值，配合aspect-ratio和object-fit实现响应式，禁用youtube直链。
直接用 <video></video> 和 <audio></audio> 标签插入，别碰 <embed></embed> 或 <object></object> —— 这俩在现代浏览器里既没语义、又缺控制、还容易被拦截，纯属历史包袱。
video 标签不播放？先查这三件事
黑屏、没控件、控制台静默失败，大概率是基础配置漏了：
-
src路径错一个斜杠或大小写，就 404；本地开发用 VS Code Live Server 时，确保视频文件真在项目目录里，别只靠“看着像对” - 没加
controls属性 → 视频加载成功也黑着，用户点不了、调不了音量、拖不了进度条 - 写了
autoplay但没加muted→ Chrome/Safari 直接拒绝播放（尤其移动端），控制台可能不报错，但play()会抛NotAllowedError
多格式兼容不是可选，是必须写的逻辑
单写一个 src="xxx.mp4" 等于把所有用户押注在 H.264 解码器上。Firefox 在某些 Linux 发行版里默认不装 H.264 支持，Safari 对 WebM 的 VP9 解码更积极，老版 Firefox 认 OGG 最牢。解决方式只有一种：用 <source></source> 显式声明优先级。
- 顺序很重要：推荐
<source src="vid.mp4" type="video/mp4"></source>放第一，<source src="vid.webm" type="video/webm"></source>第二，<source src="vid.ogv" type="video/ogg"></source>最后 -
type属性不能省，也不能写错 ——video/mpeg或video/x-matroska这类非标准值会被浏览器跳过 - 本地开发时如果用 Python HTTP 服务器或 Nginx，注意检查响应头
Content-Type是否正确（MP4 应为video/mp4，WebM 应为video/webm）；Live Server 通常自动处理，但自建服务常漏配
响应式视频别用 width="100%" 硬撑
直接设 width="100%" 或 CSS width: 100% 会让视频拉伸变形，尤其在窄屏下画面被压扁。真正可控的方式是组合使用现代 CSS 属性：
-
aspect-ratio: 16/9告诉浏览器“我想要这个宽高比”，不用 JS 算像素值（Chrome 88+、Firefox 89+、Safari 15.4+ 原生支持） -
object-fit: cover让视频填满容器且保持比例，适合封面、背景类视频；object-fit: contain保证全画面可见，适合教学、演示类视频 - 老浏览器 fallback 可用
padding-top百分比 hack，但多数新项目已无需兼容到 IE 或 Safari 14 以下
YouTube 视频不能往 video src 里塞链接
<video src="https://www.youtube.com/watch?v=xxx"></video> 必然失败 —— YouTube 返回的是 HTML 页面，不是视频流。浏览器拿到的是一堆 HTML 字符串，根本没法解码。
- 正确做法是复制 YouTube 分享面板里的
<iframe></iframe>代码，它指向的是https://www.youtube.com/embed/xxx这类专用播放器地址 - 确保
<iframe></iframe>的src是https协议，混入http在 HTTPS 页面中会被现代浏览器直接屏蔽 - 若需自定义 YouTube 播放行为（如自动开始、禁用推荐），得在
src后拼 query 参数，例如?autoplay=1&mute=1&rel=0，但注意 YouTube 的 autoplay 策略同样要求mute=1
最易被忽略的一点：路径和 MIME 类型是两个独立故障点。文件路径对了，不代表服务器返回了正确的 Content-Type；type 属性写对了，也不代表浏览器能解码那个编码——务必在 Network 面板里看响应头和实际加载的字节流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
