查看现场演示 我承认：在最近的5月，我对足球并没有太在意。但到上个月西班牙举起奖杯时，我却在观看一些我并没有利益相关的比赛，仍然无法解释越位。在那些比赛中的某一场，我注意到屏幕上的画面有时会发生什么：草坪向一个角落滑动并缩小，周围的空间打开并填充上一张赞助卡、第二个角度或演播室桌面。你不会错过比赛的任何时刻。我已经看过那种效果无数次，却未曾认真看过它。这就是电视的做法。但在我著名的不眠2am iPhone研究时，我了解到它实际上有一个名字：回缩效果（squeezeback）。在网上我见过的最接近这种效果的东西是一段YouTube视频，有人用After Effects压缩画面然后渲染出来。布局是上传前的图片，最互动的方式只是在某个已经设计好的动态图形上方添加一个热点。这看起来很奇怪……因为回缩只是布局的变化，而浏览器在布局变化方面表现得非常好！使用CSS来实现，打开的空间就是一个可以在播放时选择的真实元素，而不是后期制作中的元素。 链接 柔性CSS网格的灵活性 如果我们把播放器放在一个3×3网格的中心单元格中，而六个外部轨道收缩为零，然后动画化轨道的大小会发生什么？ 一个具有不同布局的网格 .stage { display: grid; grid-template-columns: 0fr 100fr 0fr; grid-template-rows: 0fr 100fr 0fr; overflow: hidden; transition: grid-template-columns 850ms cubic-bezier(0.65, 0, 0.35, 1), grid-template-rows 850ms cubic-bezier(0.65, 0, 0.35, 1); } .stage[data-layout='right-rail'] { grid-template-columns: 0fr 62fr 38fr; } .stage[data-layout='lower-third'] { grid-template-rows: 0fr 74fr 26fr; } .stage[data-layout='squeeze'] { grid-template-columns: 5fr 63fr 32fr; grid-template-rows: 0fr 82fr 18fr; row-gap: 8.9%; } 哇。这是一个完整的运动系统！它甚至不需要在视频或缩放包装器上进行转换，也不需要请求动画帧循环来测量任何东西。视频在一个正在缩小的单元格中，其他单元格中的面板在它们的轨道值离开零时被揭示。揭示和缩小是同一个事件。面板一直在那个单元格中以完整尺寸存在。缩小只是单元格停止隐藏它的那一刻。CSS真不错？那个row-gap: 8.9%是唯一的奇数。百分比间隙是根据高度计算的，而在16/9的比例下，8.9%的高度是5%的宽度，正好是留下的5fr的左侧列。顶部轨道是0fr，因此这个值同时制造了上下的空间。在三个侧面上具有等内缩。不幸的是，你不能用cqw编写来跳过数学，因为舞台是查询容器，而容器不能查询自己。 链接 时间线是一个文本文件 Video.js v10是一个React视频播放器组件库：createPlayer，hooks，可组合的原件等，但它没有做的是发明一个调度系统，因为浏览器已经有一个非常好的调度系统：WebVTT。 cta-cues.vtt WEBVTT away-kit 00:00:04.000 --> 00:00:12.000 right-rail champions-bundle 00:00:26.000 --> 00:00:34.000 squeeze 每个提示都有一个可选的标识符行，位于时间戳正上方，但这并不常用，但它对于这个用例非常完美。标识符成为产品密钥，负载成为布局，而副本和定价保持在你的应用中，通过该id进行标识。如果你在处理可购物视频，商品商可以通过编辑文本文件重新调整整个体验，而你的管道可以为每个资产生成一个，而无需部署。你可以将其作为<track>元素添加到播放器中，让浏览器告诉你何时有东西是活动的：附加提示的视频播放器 <MuxVideo src={src} autoPlay muted playsInline loop crossOrigin=