video标签自动播放必须同时设置autoplay和muted属性，纯视频可省略muted但建议保留；ios safari需用户交互后才允许播放；用poster和preload="metadata"优化加载；css需设position:absolute、object-fit:cover、z-index:-1并注意overflow隐藏问题；safari需手动调用play()并捕获错误。
video 标签必须加 muted 才能自动静音播放
现代浏览器（Chrome、Firefox、Safari 14+、Edge）强制要求：自动播放的视频若含音频轨道，必须显式设置 muted 属性，否则会静音且可能被完全阻止播放。仅靠 volume=0 或 CSS 隐藏控件无效。
-
<video></video>必须同时带autoplay和muted，缺一不可 - 如果视频本身没有音频轨道（如纯画面 MP4），
muted可省略，但加上更稳妥 - 部分 iOS Safari 要求用户首次交互后才允许播放，即使
muted也需触发一次play()
用 poster 和 preload="metadata" 提升加载体验
背景视频常因体积大导致白屏或卡顿。设置封面图和预加载策略能显著改善首屏感知速度。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
poster指向一张静态占位图（如poster="bg-placeholder.jpg"），在视频加载完成前显示 -
preload="metadata"告诉浏览器只预加载时长、尺寸等元信息，不下载全部视频流，节省带宽 - 避免用
preload="auto"，尤其在移动网络下易触发流量警告甚至被拦截
CSS 层叠与尺寸控制的关键写法
让视频“作为背景”不是单纯设 position: absolute 就完事——它必须覆盖容器、不溢出、保持比例，且不遮挡其他内容。
- 父容器需设
position: relative，视频设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 用
object-fit: cover确保填满且不拉伸变形；object-position: center控制焦点区域 - 务必加
z-index: -1（不是z-index: 0），否则会盖住文字/按钮；若父容器有overflow: hidden，视频超出部分会被裁剪
兼容性兜底：Safari 有时忽略 autoplay 的真实原因
Safari（尤其是 macOS Monterey 及更新版本）对自动播放策略更严格：即使 muted，若页面未获得用户焦点或视频未处于视口内，仍可能暂停。这不是 bug，是主动限制。
- 可在
window.onload或DOMContentLoaded后手动调用video.play()，捕获Promise拒绝并静默处理 - 示例：
const vid = document.querySelector('video');<br>vid.play().catch(e => console.log('Autoplay prevented:', e)); - 不要依赖
oncanplaythrough触发播放——它可能永远不触发；优先用loadeddata或直接play()
overflow 设置。一个 overflow: hidden 加错位置，就可能导致视频下半截莫名消失，而控制台毫无报错。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
