使用 CSS Grid 和 WebVTT 重建的广播挤压

观看现场演示 观看现场演示 坦白：直到五月份我才不太关心足球。但当西班牙队上个月举起奖杯时，我正在观看与我无关的比赛，仍然无法解释越位的原因。在其中一场比赛中，我注意到屏幕上的图片有时会发生什么：草地滑入一个角落并缩小，周围的空间打开并充满赞助商卡、第二个角度或工作室桌子。你不会错过比赛的任何一个时刻。我已经无数次看到这种效果，但并没有真正仔细观察它。这就是电视的作用。但在一次臭名昭著的凌晨 2 点无法入睡的 iPhone 研究会议上，我了解到它实际上有一个名字：挤压。我在网上看到的最接近这种效果的东西是 YouTube 视频，其中有人在 After Effects 中挤压帧并将其渲染出来。布局是一张图片，在上传之前烘焙，而它获得的最具互动性的是某人已经设计的动态图形之上的热点。这很奇怪……因为挤压只是布局更改，而浏览器非常擅长布局更改！在 CSS 中执行此操作，打开的空间是一个单元格，您可以在其中放置真正的元素，在播放时而不是在后期选择。如果我们将玩家放在 3×3 网格的中心单元中，其中六个外部轨道被折叠成空，然后为轨道大小设置动画，会发生什么？具有不同布局的网格 Check Copied Copy Copy Check Copied Copy Copy .stage { display : grid ;网格模板列：0fr 100fr 0fr ；网格模板行：0fr 100fr 0fr ；溢出：隐藏；过渡：网格模板列 850 毫秒三次贝塞尔曲线 ( 0.65 , 0 , 0.35 , 1 ) ，网格模板行 850 毫秒三次贝塞尔曲线 ( 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'] { 网格模板列: 5fr 63fr 32fr ;网格模板行：0fr 82fr 18fr；行距：8.9%；哇哦。这就是一个完整的运动系统！它甚至不需要对视频进行转换或缩放包装器或 requestAnimationFrame 循环来测量任何内容。视频是一个单元格中的正常网格项目，该单元格正在变小，并且停放在其他单元格中的面板随着其轨道值为零而显示出来。揭示和收缩是同一事件。面板始终以全尺寸放置在该单元中。收缩只是细胞停止隐藏它的那一刻。 CSS 不是很简洁吗？行间距：8.9% 是其中唯一的奇数。百分比差距根据高度来解决，在 16/9 处，高度的 8.9% 是宽度的 5%，这正是 5fr 左列。顶部轨道为 0fr ，因此一个值同时构成上方和下方的空间。三边等距插入。不幸的是，您不能将其写在 cqw 中并跳过数学运算，因为阶段是查询容器，而容器无法查询自身。 Video.js v10 是一个 React 视频播放器组件库：createPlayer、hooks、可组合原语等，但它没有发明一个调度系统，因为浏览器已经有一个非常好的调度系统：WebVTT。 cta-cues.vtt Check Copied Copy Copy Check Copied Copy Copy WEBVTTaway-kit 00:00:04.000 --> 00:00:12.000 right-rail Champions-bundle 00:00:26.000 --> 00:00:34.000 squeeze 每个提示在时间戳上方都有一个可选的标识符行，但实际上并不经常使用，但是它非常适合这个用例。标识符成为产品密钥，有效负载成为布局，副本和定价保留在由该 ID 键入的应用程序中。如果您正在制作可购物视频，销售商可以通过编辑文本文件来重新安排整个体验，并且您的管道可以为每个资产生成一个视频，而无需部署。您可以将其作为 元素添加到播放器，并让浏览器在某些活动处于活动状态时告诉您： 附有提示的视频播放器 Check Copied Copy Copy Check Copied Copy Copy < MuxVideo src = { src } autoPlay muted attemptsInline loop crossOrigin = "onymous " > < track kind = "metadata" label = " cta" src = " /cta-cues.vtt " default /> Video.js v10’s usePlayer 采用选择器参数，因此 selectTextTrack 只会为您订阅商店的文本轨道片段，而不订阅其他内容。这很重要，因为您不会在每次更新时重新渲染，并且您会被告知轨道何时实际注册，因为轨道在引擎连接时来来去去。使用提示 Check Copied Copy Copy Check Copied Copy Copy import { usePlayer , selectTextTrack } from '@videojs/react' ; const { textTrackList } = usePlayer ( selectTextTrack ) ;常量准备好 = textTrackList 。一些 ( ( t ) => t .label === 'cta' ) ;商店将轨道模型作为普通描述符，因此一旦它表明您的轨道存在，您就可以检查实时 TextTrack 以访问提示本身：处理提示更改事件 Check Copied Copy Copy Check Copied Copy Copy track 。模式='隐藏'；追踪 。 addEventListener('cuec