用 CSS Grid 和 WebVTT 重制电视缩放特效
The broadcast squeezeback, rebuilt with CSS Grid and WebVTT
作者从观看足球赛时的电视画面缩放特效（squeezeback）获得灵感，发现这种传统上需要后期渲染的布局变化，其实可以用 CSS Grid 轻松实现。通过将播放器置于 3x3 网格中心并动态调整轨道大小，无需复杂的动画循环即可实现流畅的缩放与侧边栏展开。更妙的是，利用 WebVTT 的元数据轨道来定义时间轴，让非技术人员只需编辑文本文件就能控制整个交互流程。文章还展示了如何结合 Canvas 提取视频色调生成环境光效，并解决了 CSS 动画中 fr 值插值和 @property 注册等棘手问题，最终打造出一个高度动态且可维护的交互式视频体验。
缩放本质上只是布局变化，而浏览器非常擅长处理布局变化！
HN 评论区
10- jareklupinski
这种特效我看过无数次，但从未仔细琢磨过。毕竟电视不都这样嘛。不过在我某次臭名昭著的凌晨两点失眠刷 iPhone 查资料时，我才知道它其实有个名字：squeezeback。
这让我想起了为什么我喜欢和媒体圈的人打交道：TouchDesigner 帮我以最佳方式连接了技术与交互，让他们能用自己熟悉的流程图和术语，精准地描述脑海中的想法，而我则能当场快速迭代，即时反馈他们的设计方案。
- kmoser
这些转场应该是动画效果吗？也就是说视频会在几秒钟内逐渐改变大小？因为在我这里，无论是 Firefox 还是 Chrome，它都是瞬间直接跳到新尺寸。
- davekiss
作者在此！这个挺有意思的。这个想法在我脑子里盘旋有一阵子了——我依然很想摸索出一套适用于直播流的 workflow，我相信这是可行的，但可能不像现在这样仅靠原生技术就能实现。