视频课程页面需同时解决播放控制、目录跳转、响应式布局、移动端静音拦截四件事；video必须加muted+autoplay+playsinline（含webkit前缀），双source兜底，preload="metadata"，目录跳转须currentTime+play()显式触发并捕获错误，卡片用grid+aspect-ratio，禁用页面滚动改用容器滚动，错误时回退poster图，跳转逻辑与播放状态须解耦。
视频课程页面不是把 <video> 往中间一摆就完事——真要撑住学习场景，得同时解决播放控制、目录跳转、响应式布局、移动端静音拦截这四件事。漏掉任何一环，用户点开就是卡顿、黑屏、找不到章节、或点不动进度条。
video 元素必须加 muted + autoplay + playsinline 才能自动播
iOS Safari 和新版 Chrome/Firefox 默认禁止非静音自动播放。只写 autoplay 等于没写；只写 muted 但不加 playsinline，iOS 会强制全屏，课程页直接崩掉。
-
playsinline和webkit-playsinline都得写，缺一不可 - 别信“用户第一次交互后就能自动播”——课程页首屏就要播，不能等点击
- 用
<source>双格式兜底：<source src="course.mp4" type="video/mp4">+<source src="course.webm" type="video/webm">，单 src 属性在 Firefox 里直接白屏 - 加
preload="metadata"，比auto更轻量，首帧加载快
课程目录跳转必须用 currentTime + play() 显式触发
只改 currentTime 不调 play()，视频会停在目标时间但不继续播——尤其 iOS 上，静音状态下 currentTime 设了也白设，必须显式 play() 才能激活播放状态。
- 绑定点击事件时，先
video.currentTime = time，再video.play().catch(e => console.warn("play failed", e)) - 别在
onclick里直接写video.currentTime=120;video.play()—— 没错误捕获，失败时静默卡死 - 如果课程有多个视频片段，跳转前先
video.src = newSrc，再load()，最后设currentTime和play() - 移动端注意：
play()必须由用户手势（如 click）触发，不能由定时器或 AJAX 回调触发，否则被浏览器拒绝
多列视频卡片布局要用 grid + aspect-ratio，别碰 float
课程列表常带缩略图+标题+时长，多个 <video> 并排时，用 float 或 inline-block 会导致基线错位、高度塌陷、小屏换行混乱——这不是代码写错了，是 CSS 渲染机制本身就不适合这类场景。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 父容器用
display: grid，配grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - 每个
<video>加aspect-ratio: 16/9+width: 100%，不用height属性，避免 flex-basis 覆盖 - 加
object-fit: cover防止缩略图拉伸变形 - 禁用
flex-shrink: 0（这是全屏背景视频才用的），课程卡片要能随容器缩放
移动端滚动穿透和地址栏跳变必须主动处理
iOS Safari 滚动时地址栏收起/展开，100vh 值会突变，导致视频区域突然裁切或留白——这不是 bug，是浏览器行为，靠 CSS 无法修复。
- 课程页内容区用独立容器滚动（
overflow-y: auto），html和body设height: 100%; overflow: hidden，彻底禁用页面级滚动 - 不要依赖
window.innerHeight动态重设 video 高度——resize 事件太频繁，节流后仍有延迟；固定布局更稳 - 加
@media (prefers-reduced-motion: reduce)关闭视频背景，对无障碍友好 - 监听
error事件，出错时 fallback 到 poster 图：video.addEventListener('error', () => { video.style.backgroundImage = 'url(fallback.jpg)'; })
最易被忽略的是：课程跳转逻辑和播放状态必须解耦——跳转时不管当前是否暂停，都要先 play() 再设 currentTime；而用户手动点击暂停后，再点同一章节，不能只设时间，得判断是否需 play()。这点在 iOS 上尤其敏感，稍不注意就变成“点了没反应”。
