Lower thirds OBS : une source navigateur, tous les graphiques
OBS Studio affiche nativement des graphiques HTML5 en direct — sans plug-in, sans carte d’acquisition, sans seconde machine. Voici la configuration exacte des lower thirds OBS, bandeaux de score et défilants avec une seule source navigateur transparente, ainsi que les problèmes courants et leurs solutions.
Pourquoi une source navigateur plutôt qu’une source média
Une source média lit un fichier. Une source navigateur exécute une page web vivante, composée sur votre scène avec transparence complète et mise à jour en temps réel. Cette différence change tout pour le direct : la page peut modifier son contenu pendant qu’elle est à l’antenne, donc un score ou un nom se met à jour sans toucher à OBS.
Une seule source porte aussi tous les graphiques. Synthé, bandeau de score et défilant sont des éléments de la même page transparente : ils ne se désalignent jamais et vous n’empilez pas douze sources.
Ajouter la source, pas à pas
- Lancez LowerThird Software. Il sert le pupitre et la page de sortie depuis votre machine.
- Dans OBS, sélectionnez la scène qui contient déjà votre caméra ou votre capture de jeu. Cliquez sur + sous Sources et choisissez Navigateur.
- Nommez-la Habillage et validez.
- URL :
http://localhost:5275/output. - Largeur 1920, hauteur 1080 — identique à votre canevas ; ne redimensionnez pas la source dans la scène.
- Laissez Éteindre la source lorsqu’elle n’est pas visible décoché, et ne cochez Rafraîchir le navigateur lorsque la scène devient active que si vous voulez remettre les graphiques à zéro à chaque changement de scène.
- Validez, puis remontez la source en haut de la liste pour qu’elle passe devant la caméra.
Transparence : rien à régler
Beaucoup cherchent un réglage de transparence. Il n’existe pas, et n’a pas lieu d’être : la source navigateur d’OBS respecte déjà la couche alpha de la page. Si la page ne peint pas de fond, OBS ne compose que les pixels dessinés.
Si vous voyez un rectangle noir ou blanc, c’est la page qui peint un fond, pas OBS. Le CSS personnalisé de la boîte de dialogue peut corriger une page tierce (body { background: transparent !important; }), mais une page conçue pour l’antenne devrait déjà être transparente.
Taille, mise à l’échelle et zone de sécurité
Créez toujours la source à la résolution de votre canevas — normalement 1920×1080 — et positionnez les graphiques dans la page plutôt que de redimensionner la source dans OBS. Redimensionner une source navigateur ré-échantillonne le texte et adoucit tous les bords : c’est la première cause de titres flous.
Si vous diffusez en 1280×720, gardez la source en 1920×1080 et laissez OBS réduire tout le canevas une seule fois à la fin. Une réduction propre vaut mieux que deux.
Cinq problèmes et leurs solutions
- La source est vide. L’application n’est pas lancée, ou le port diffère. Ouvrez l’URL dans un navigateur classique : si la page y est vide aussi, le problème ne vient pas d’OBS.
- Les graphiques ne se mettent pas à jour. La page est en cache ou la socket est tombée. Clic droit → Interagir, ou Rafraîchir. Une page basée sur WebSocket doit se reconnecter seule.
- Les titres sont mous. La source est mise à l’échelle. Réinitialisez la transformation (Ctrl+R avec la source sélectionnée) et fixez la taille dans les propriétés.
- Ça saccade. L’accélération matérielle est désactivée dans OBS, ou une animation coûte cher. Préférez transform et opacity, gérés par le GPU, à width, height ou aux ombres.
- L’habillage disparaît au changement de scène. L’option Éteindre la source lorsqu’elle n’est pas visible est cochée. Décochez-la, ou ajoutez la même source dans chaque scène en référence et non en copie.
Travailler en direct
Gardez le pupitre sur un second écran, ou sur une tablette posée sur la table — c’est une page web, donc tout appareil disposant d’un navigateur sur votre réseau peut le piloter. Tapez le nom du prochain invité pendant que l’actuel est encore à l’écran, puis appuyez sur TAKE au changement de plan.
Comme les commandes passent par WebSocket, il n’y a ni délai d’interrogation ni rechargement : vous cliquez et l’animation démarre sur la même image.
Prêt à l’essayer sur votre scène ? Récupérez une version en accès anticipé, ajoutez une source navigateur et envoyez un synthé à l’antenne en cinq minutes.
Demander un accès anticipé