用CSS Grid和WebVTT重建的广播挤压回退效果
内容提要
本文介绍如何用CSS网格和WebVTT实现“挤压回退”效果，即在视频播放时动态缩小画面，腾出空间展示赞助卡片、产品信息等。通过监听文本轨道事件触发布局变化，无需复杂动画。还涵盖背景光效、颜色提取、表单交互及历史背景，强调此技术灵活高效，可扩展至多场景。
延伸解读
从电视到网页：挤压回退的演变
挤压回退效果并非网页首创，早在20世纪80年代，Ampex的ADO等硬件就能实时缩放和定位视频信号，但成本高昂，多用于后期制作。直到数字视频效果器被集成到字符生成器中，这一效果才逐渐普及，从特殊效果变成常规布局。文章指出，从硬件实现到网页实现，跨越了约二十年，关键在于将效果融入已有工具。如今，用CSS Grid和WebVTT即可轻松实现，无需复杂硬件或后期处理。
CSS Grid实现挤压回退的巧妙之处
实现挤压回退的核心是将视频置于3×3网格的中心单元格，通过动画调整轨道大小来改变布局。这种方法无需对视频应用transform或使用requestAnimationFrame，因为视频只是网格项，随着单元格缩小而自然缩放。面板始终位于其他单元格中，当轨道从0展开时，面板随之显现。这种设计让“缩小”和“揭示”成为同一事件，简化了实现逻辑。
WebVTT作为调度系统的优势
使用WebVTT文本轨道作为调度系统，通过监听cuechange事件来触发布局变化，而非轮询currentTime。这样，拖拽、循环和跳转等操作都能自动正确处理，无需额外代码。此外，WebVTT的标识符可作为产品键，负载作为布局，便于非技术人员通过编辑文本文件来调整体验，无需部署。
实现中的两个关键陷阱
文章提醒了两个CSS陷阱：一是网格fr值动画时，模板中fr总数必须保持一致，否则动画曲线会异常；二是自定义属性需通过@property注册才能插值，且初始值不能使用相对单位（如rem），否则整个规则失效。这些细节若不注意，可能导致效果异常或静默失败。
Q&A
什么是挤压回退效果？
挤压回退是一种视觉效果，在视频播放时动态缩小画面，腾出空间展示赞助卡片、产品信息等。
如何用CSS Grid实现挤压回退效果？
将视频放在3x3网格的中心单元格，通过动画调整轨道大小来触发布局变化，无需复杂动画或变换。
WebVTT在挤压回退效果中扮演什么角色？
WebVTT文本轨道作为调度系统，通过监听cuechange事件来触发布局变化，支持拖拽、循环和跳转等操作。
如何实现背景光效和颜色提取？
通过canvas和CSS模糊效果实现背景光效，并可从视频帧中提取颜色作为按钮背景色。
实现挤压回退时有哪些CSS陷阱需要注意？
两个陷阱：网格fr值动画需保持总数一致，以及自定义属性需注册才能插值。
挤压回退效果可以扩展到哪些场景？
可扩展至表单交互，通过焦点保持布局冻结，避免用户输入中断；还可用于手语翻译、幻灯片、多角度切换等。
挤压回退效果的历史背景是什么？
从早期硬件设备（如Ampex ADO）到现代网络直播，现已通过CSS和WebVTT实现，灵活高效。
