video标签必须放在body中，不能置于head或table内；src属性须配合source标签及准确type值使用，poster路径需正确，autoplay需搭配muted才可能生效。
video 标签必须放在 body 里，不能塞进 head 或 table 里
直接把 <video> 写在 <head> 中，浏览器会忽略它；塞进 <table> 单元格里，虽然能渲染，但语义错误、SEO 受损、辅助技术读取混乱，还可能触发移动端布局错位。
-
<video>是流式内容元素，只应在<body>的流式上下文中使用（比如<main>、<section>、<p>） - 表格（
<table>）是数据容器，不是媒体容器，强行嵌套会导致 CSS 响应式失效、宽高计算异常 - 若需“表格样式排版”，用 CSS Grid 或 Flex 替代，再把
<video>放进去——结构语义和视觉表现要分开处理
src 属性不能单独用，必须配合 source 或 type
只写 <video src="video.mp4"></video> 看似简洁，但 Firefox、旧版 Edge 和部分 Linux 浏览器会直接不加载——它们不识别 H.264 编码，却支持 WebM，而单 src 不带 type 就无法让浏览器提前判断兼容性。
- 正确做法是删掉
src属性，改用<source>显式声明格式：<source src="video.mp4" type="video/mp4"> -
type值必须准确：MP4 对应video/mp4，WebM 对应video/webm，OGV 对应video/ogg - 浏览器按
<source>出现顺序尝试，命中第一个就停，所以把兼容性最广的 MP4 放第一位
poster 图片路径出错，视频加载前会显示空白或 404 占位符
poster 不是装饰项，它是视频未加载时的第一视觉反馈。路径写错（比如漏掉子目录、大小写不匹配、用本地 file:// 路径）会导致封面不显示，用户面对黑屏或默认灰块，误以为视频坏了。
- 务必用相对路径，且与 HTML 文件同级或基于当前文档解析：例如 HTML 在
/index.html，poster 在/media/cover.jpg，则写poster="media/cover.jpg" - 避免使用绝对路径如
https://yoursite.com/media/cover.jpg—— 开发时本地预览会失败；也别用file:///—— 部署后必然 404 - 图片尺寸建议匹配视频宽高比（如 16:9），否则拉伸或留白影响观感
autoplay 失效不是代码错了，而是浏览器策略卡住了
加了 autoplay 却没播，不是 JS 没跑，也不是路径不对，是现代浏览器（Chrome、Safari、Firefox）强制要求：有声音的自动播放必须由用户手势触发。静音才可能放行。
立即学习“前端免费学习笔记（深入）”；
- 必须同时加
muted：只有<video autoplay muted>才大概率生效 - 即使 muted，iOS Safari 和部分 Android WebView 仍可能拦截，尤其页面刚加载时——可加
preload="metadata"提前读取时长/尺寸，降低卡顿感 - 不要依赖 autoplay 做关键交互（比如引导动画），它不可靠；把它当作“锦上添花”，而非“功能必需”
真正容易被忽略的，是 <source> 的 type 值和服务器 MIME 配置必须一致——如果 Nginx 或 Apache 没配对 video/webm 的响应头，哪怕标签写得再准，浏览器也会拒绝加载。
文章来自机圈观察员网，发布者：，转载请注明出处：https://www.jqgcy.com/jiquanzatan/123666.html
