用嵌入本地mp4需确保路径正确、编码为h.264+aac、添加controls属性；youtube必须用嵌入；poster与preload="metadata"配合可优化首屏体验；safari播放失败多因mime类型或moov box位置问题。
怎么用 <video></video> 标签嵌入本地 MP4 文件
直接放路径就行，但路径错、编码不支持、没加 controls 是最常导致“视频不显示”或“只显示黑框”的原因。
常见错误现象：GET http://localhost:8000/video.mp4 404 (Not Found)（路径不对）、播放器空白无按钮（忘了加 controls）、点播放没反应（MP4 编码不是 H.264 + AAC）。
- 确保 MP4 文件放在和 HTML 同目录，或写对相对路径，比如
src="assets/demo.mp4" - 必须加
controls属性，否则默认不显示播放控件：<video controls src="demo.mp4"></video> - 如果用 Windows 用剪映/手机导出的 MP4 播不了，大概率是编码问题；用
ffmpeg转一次：ffmpeg -i input.mp4 -c:v libx264 -c:a aac output.mp4 - 加
preload="metadata"可减少首帧加载延迟，尤其大文件
网页里嵌 YouTube 视频该用 <iframe></iframe> 还是 <video></video>
用 <iframe></iframe>。YouTube 不提供直接可用的 MP4 地址，硬扒链接不仅不稳定，还违反 ToS；<video></video> 根本没法加载它的流。
正确做法是进 YouTube 视频页 → 点“分享”→“嵌入”，复制出来的 <iframe></iframe> 代码即可用。别手写地址，https://www.youtube.com/embed/xxx 才是合法嵌入地址。
立即学习“前端免费学习笔记（深入）”；
- 去掉
frameborder="0"—— 已废弃，现代浏览器自动忽略 - 加上
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"，否则 iOS 上全屏、画中画可能失效 - 如需自动播放，加
autoplay和muted（浏览器强制要求静音才能自动播）：allow="autoplay; muted"
<video></video> 的 poster 和 preload 怎么配合用
poster 是视频加载前显示的封面图，preload 控制预加载程度——两者一起用能明显改善首屏体验，尤其移动端弱网下。
不设 poster 就是黑屏或第一帧卡顿；设了但 preload="none"，用户点播放才开始加载，等待感强；设 preload="auto" 又可能浪费流量。
- 推荐组合：
<video poster="cover.jpg" preload="metadata" controls><source src="video.mp4" type="video/mp4"></source></video> -
preload="metadata"只加载时长、尺寸、封面等信息，快且省流量；preload="auto"在桌面端可考虑，但别在移动页面默认开 -
poster图片建议压缩到 50KB 以内，格式用.jpg或.webp，避免拖慢首屏渲染
为什么 Chrome 里视频能播，Safari 却提示“无法载入”
大概率是 MIME 类型没配对，或者服务器没返回正确的 Content-Type 响应头。Safari 对 MP4 的 moov box 位置更敏感，如果视频是“流式编码”（moov 在文件末尾），它会卡住不动。
本地双击打开没问题，但通过 http-server 或 Nginx 访问失败，就是服务端配置或文件本身的问题。
- 检查响应头：用 DevTools 的 Network 面板看
video.mp4请求的Content-Type是否为video/mp4；Nginx 需确认有types { video/mp4 mp4; } - 修复 moov 位置：用
ffmpeg -i input.mp4 -c copy -movflags +faststart output.mp4重写头部 - 开发阶段用
serve（npm 包）比http-server更稳妥，它默认带正确 MIME 类型
