HTML 插入视频怎么兼容？source 顺序、autoplay 赋 false 为何无效与 playsinline 必加
用 HTML 插入视频，代码三行就能跑，但线上最常见的四类事故（不能自动播放、静音无效、手机上全屏跳出、加载占流量）全部来自对布尔属性的误解。本文依据 MDN 的 video 元素参考页原文整理，包含它给出的完整可复制示例。
一、MDN 官方的标准写法
实测说明：旧路径 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video 现在返回 301，Location 指向 /en-US/docs/Web/HTML/Reference/Elements/video，新地址返回 200——MDN 已把元素参考整体挪进 Reference 层级，书签需要更新。
官方示例（原文照录，含降级链接）：
<video controls width="250"><source src="/shared-assets/videos/flower.webm" type="video/webm" /><source src="/shared-assets/videos/flower.mp4" type="video/mp4" /><a href="/shared-assets/videos/flower.webm">WEBM</a><a href="/shared-assets/videos/flower.mp4">MP4</a></video>
两个要点：多个 source 按顺序尝试，第一个能播的就停；标签内部的 a 链接是"一个格式都不支持"时的兜底，很多人漏写导致老浏览器一片空白。
二、布尔属性陷阱：写 ="false" 等于写 ="true"
这是本文最关键的一条。MDN 原文写得很直接："To disable video autoplay, autoplay=\"false\" will not work; the video will autoplay if the attribute is there in the tag at all. To remove autoplay, the attribute needs to be removed altogether."
同样地关于静音，原文为："muted=\"false\" will not work; the audio will be muted if the attribute is present at all. To unmute, the attribute must be removed entirely."
结论：HTML 布尔属性只看存不存在，不看值。给 controls、loop、playsinline 赋 false 全部无效，必须整个删掉。这也是"我在代码里明明写了 autoplay=false 却还是自动播"的唯一原因。
三、preload 与 poster 决定首屏流量
MDN 对 preload 的定义是"Indicates how the browser should load the video (including any poster image)"，取值 none（"Indicates that the video should not be preloaded"）、metadata、auto。列表页、多视频页面的正确选择是 preload="none" 加 poster="缩略图.jpg"，这样既不下载视频，又有画面占位。
另外官方提到，在某些设置下 autoplay 属性存在时并不会立刻下载播放，而是"等到元素接近或进入视口"（near or within the viewport）——这是浏览器省电策略，不能指望它替代懒加载逻辑。
四、移动端必须加 playsinline
不写 playsinline，iOS Safari 会用系统全屏播放器接管，你的自定义控制条与封面全部失效。配套还要注意 width/height：MDN 说明它们分别是视频显示区域的宽和高，写死数值可避免加载完成后布局跳动（CLS）。
五、格式与编码
- 容器：
video/mp4（H.264 + AAC）、video/webm（VP9/AV1 + Opus）、video/ogg（Theora）。 type里可写 codecs 参数精确到编码，如type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'，避免"能播但没声音"。- 顺序建议 webm 在前、mp4 在后：新浏览器省带宽，老浏览器有兜底。
六、常见问题 FAQ
问：本地文件怎么插？
答：file:// 只在自测可用，正式部署必须走 HTTP 路径，否则跨域与下载策略都会出问题。
问：视频需要登录才能看怎么办？
答：用带鉴权的接口输出，配合 crossorigin 与 Range 请求；把地址写死在前端等于公开。
问：能不能直接插 flash 或优酷外链？
答：Flash 已彻底淘汰；第三方外链常被防盗链失效，长期方案是自己的静态存储。
七、总结
HTML 插视频的可靠写法是：用 video 包多个 source 并写明 type（必要时带 codecs），保留 a 标签兜底；controls、loop、muted、autoplay、playsinline 全是布尔属性，写 ="false" 无效，要关就整段删除；列表场景用 preload="none" 配 poster 控制流量；务必写 width/height 防跳动；iOS 必须有 playsinline。遇到行为与预期不符，第一件该检查的是不是拼写，而是你有没有给布尔属性赋值。
生产内容，同时打通搜索引擎（SEO）与AI搜索引擎（GEO）流量入口的软件！ 点击进入365建站器 »
