Der Broadcast-Squeezeback, neu aufgebaut mit CSS Grid und WebVTT
The broadcast squeezeback, rebuilt with CSS Grid and WebVTT
Ein Entwickler von Mux zeigt, wie sich der bekannte TV-Effekt des Squeezebacks – das Verkleinern des Videobilds zugunsten von Zusatzinhalten – mit modernen Webtechnologien nachbauen lässt. Statt das Video vorab zu rendern, nutzt er ein CSS Grid, dessen Spalten und Zeilen animiert werden, um Platz für echte HTML-Elemente wie Buttons oder Formulare zu schaffen. Die zeitliche Steuerung übernimmt WebVTT, ein Textdatei-Format, das als Timeline dient. Ergänzt wird das Ganze um einen Ambient-Glow, der die Farben des Videos auf einen Canvas überträgt, sowie um Tipps zu CSS-Animationen und zur Integration mit Video.js.
Der Squeeze ist nur eine Layout-Änderung, und Browser sind sehr gut in Layout-Änderungen!
- jareklupinski
Ich hatte diesen Effekt schon eine Milliarde Mal gesehen, ohne wirklich genau hinzusehen. Es ist einfach das, was Fernsehen tut. Aber während einer meiner berüchtigten 2-Uhr-nachts-Kann-nicht-schlafen-iPhone-Recherchen habe ich gelernt, dass es tatsächlich einen Namen hat: ein Squeezeback.
Das erinnert mich daran, warum ich es liebe, mit Medienleuten abzuhängen: TouchDesigner hat mir geholfen, Technik und Interaktives auf die beste Art zu verbinden, sodass sie mir genau sagen können, was in ihrem Kopf vorgeht, mit ihren Flows und ihrer Fachsprache, und ich kann ihre Designs iterativ schnell feedbacken, während sie im Raum sind.
- kmoser
Sollen diese Übergänge animiert sein, d.h. das Video ändert seine Größe über ein paar Sekunden? Weil es bei mir sowohl in Firefox als auch in Chrome einfach sofort auf die neue Größe springt.
- davekiss
Autor hier! Das hat Spaß gemacht. Die Idee schwirrte mir schon eine Weile im Kopf herum – ich würde immer noch gerne einen Workflow für Live-Streams dafür finden, ich bin sicher, das ist machbar, aber vielleicht nicht mit rein nativer Technik wie es gerade ist.