Transitions HTML/CSS avec le plugin “Browser Transition”

Principe & Fonctionnement

Sur OBS, il est possible de paramétrer différents types de transition entre les scènes : fondu, coupure, glissement, stinger (une petite vidéo au format mov ou mp4)…

Pour cet effet, il faut le plugin “Browser Transition” qui permet d’utiliser un fichier HTML comme une animation de transition mais cela nécessite de savoir un peu coder du HTML/CSS Javascript.

A partir d’une scène d’attente de début de stream, j’ai imaginé des transitions qui s’adaptent selon la scène de destination.

Transition Gaming/Just Chatting/React

Mon premier test, une transition qui indique le thème du stream. Si je suis sur ma scène d’attente et que je veux aller sur ma scène Gaming/Jeu, la transition s’adapte. C’est loin d’être parfait mais c’est un début.

Transition podcast pour le festival PodRennes

Ce second test une transition dans le cadre du festival de podcast PodRennes. Toute la journée une série de podcasts vient se produire sur scène. J’ai fait en sorte qu’une transition s’adapte automatiquement selon le podcast qui arrive sur scène en affichant.

Ici, au moment de la transition :

• Du Javascript va consulter l’heure et le jour au moment de la transition afin de sélectionner les informations adéquates.
• Pour sélectionner les informations, le fichier HTML va consulter un fichier .json qui recense toutes les informations des émissions au programme du festival.
• Ainsi au moment de la vidéo ci-dessus, c’était l’heure du podcast “SPOILERS L’émission”, le texte et le logo se sont mis à jour.

Pour ce second exemple, les essais étaient concluants mais pas assez pour être utilisé pendant le festival, dommage ¯_(ツ)_/¯.

Les premiers prototypes

Les deux premiers prototypes étaient très simple, il s’agissait surtout de tester le fonctionnement sur OBS. Pour les deux transitions, il s’agit du même type d’animation, un volet de droite à gauche et un volet de bas en haut, avec une image dynamiquement insérée.

Sur le premier exemple, c’est le logo d’un podcast, pour le seconde exemple c’est une illustration du jeu en cours (Borderlands).

Je me suis basé sur l’esprit de ce CodePen.