CSS Grid и WebVTT: как превратить видео в интерактивный телеэкран
The broadcast squeezeback, rebuilt with CSS Grid and WebVTT
Автор, вдохновившись футбольными трансляциями, воссоздал эффект «squeezeback» на чистом CSS и WebVTT. Вместо пост-продакшена, он использует CSS Grid для анимации макета, а WebVTT-файл задаёт тайминг появления панелей. Это позволяет добавлять интерактивные элементы, такие как формы или кнопки покупки, прямо в видео. Также рассматриваются приёмы: подсветка фона цветами видео через canvas, обработка фокуса для удержания формы и подводные камни CSS-анимаций.
Сжатие — это просто изменение макета, а браузеры очень хорошо умеют менять макет!
- jareklupinski
Я видел этот эффект миллион раз, не особо вглядываясь. Это просто то, что делает телевизор. Но во время одной из моих печально известных сессий исследований на айфоне в 2 часа ночи, когда не мог уснуть, я узнал, что у него на самом деле есть название: скуизбэк.
напомнило мне, почему я обожаю тусоваться с медийщиками: TouchDesigner помог мне соединить технологии и интерактив наилучшим образом, позволяя им точно рассказать, что у них в голове, используя их потоки и жаргон, и я могу быстро давать обратную связь по их дизайнам итеративно, пока они в комнате
- kmoser
Должны ли эти переходы быть анимированными, то есть видео меняет размер в течение нескольких секунд? Потому что у меня оно просто мгновенно прыгает на новый размер и в Firefox, и в Chrome.
- davekiss
автор здесь! это было забавно. идея крутилась у меня в голове какое-то время — до сих пор хотелось бы придумать рабочий процесс для живых стримов, я уверен, что это возможно, но, возможно, не с помощью только нативных технологий, как сейчас