28172 sujets

CSS et mise en forme, CSS3

Bandeau sur texte de vidéo

Bonjour,
sur beaucoup de vidéos Youtube d'apprentissage des langues, par exemple, un bandeau de couleur se met en surimpression du texte et défile, ligne après ligne. Ceci permet à la personne qui apprend le texte de le suivre plus facilement. Je vois mal cet effet réalisé en vidéo. Avec les sous-titres, en remplaçant le texte par un bandeau ? Cette méthode ne doit pas être facile non plus. La vitesse est décidée d'avance, elle peut correspondre à la vitesse de lecture d'une personne. Par contre, l'effet démarre avec la vidéo, ce qui signifie qu'il y a une synchronisation, aussi pour la fin de la vidéo. Et le bandeau ne recouvre que le texte présent, indépendamment de sa longueur. Il y a aussi une synchronisation avec les paroles de la phrase. Ça fait beaucoup de paramètres, pour un petit bandeau. Un exemple, parmi d'autres :
https://www.youtube.com/watch?v=EL6gw96u1-U&t=51s
Avez-vous une idée ? C'est peut-être tout bête, mais ayant déjà ajouté des sous-titres à des vidéos, je connais les difficultés des synchronisations à respecter.
Salut Bongota,

Oui mais là : autant les sous-titres sont une fonctionnalité en surimpression dans la vidéo, autant ce que tu nous présente en démo semble intégré dans la vidéo elle-même.
Là c'est filmé avec l'image, non ?
Je n'en sais rien, justement. Filmé avec l'image, il faudra quand même qu'un bandeau défile sur le texte, et en synchro avec ce texte et la fin de la séquence vidéo de la page.
La vidéo n'a que peu d'importance dans ces cours, si ce n'est de faire défiler du texte. C'est pourtant bien une vidéo (1080 P HD)
Une idée, et si l'ensemble du texte n'était finalement qu'un sous-titre ? Il serait alors bien plus facile de le recouvrir d'une couleur background.
ps: Je viens de vérifier, il y a en plus des sous-titres, ce n'est donc pas ça. Cependant, on devrait aussi pouvoir le faire avec des sous-titres ?
Modifié par Bongota (12 Mar 2024 - 16:17)
Salut,

les sous-titres intégrés à la vidéo, c'est lourd. Le moindre changement de mot ou de faute découverte et il faut refaire la vidéo. Il semble pourtant qu'ils aient procédé de cette façon.

J'ai sous-titré une fois "à la main" une vidéo de 13 minutes, avec le format .vtt. C'est fastidieux au possible. Heureusement, sans faire appel à des logiciels de sous-titrage automatiques, très chers, il existe des petits utilitaire gratuits qui facilitent ce travail fastidieux.

Même si on peut faire un bandeau background avec le système des sous-titrage, le problème est ailleurs. Il faut bien regarder le modèle que j'ai montré sur Youtube. Le background suit les paroles du texte et saute à la ligne suivante en même temps que ce texte. De plus, ce bandeau s'adapte à la longueur, variable, de la phrase. Impossible à faire ça avec les sous-titres. Le sous-titre pile sur chaque phrase, je ne donne pas cher pour des décalages rapides.

J'ai trouvé ça en premier, faire un background qui s'adapte à la longueur de la phrase. Premier problème résolu (on supprime le défilement des keyframes, dont on a pas besoin). J'ai effectué des essais de phrases de longueurs différentes, c'est pas parfaitement au point, les phrases sont parfois coupées.
https://codepen.io/jreaux62/pen/EZYBeW
Ce n'est qu'une partie du problème résolu. Maintenant, comment on fait pour que le bandeau passe sur la phrase du dessous, en même temps que les paroles de la vidéo ?
J'ai aussi trouvé ça, avec canvas
https://www.develop4fun.fr/creer-du-texte-multi-lignes-et-un-background-avec-canvas/
Mais la synchro ? On en revient à la vidéo.
Je n'en ai pas particulièrement besoin pour le moment, mais je suis curieux d'y arriver. Et j'ai l'intuition qu'il devrait y avoir une solution simple. Qui a une idée Smiley smile
Salut,

hum je ne comprends pas pourquoi les sous titres d'une vidéo cela ne te convient pas ?
Cela se met à jour tout seul au fur et à mesure qu'une personne parle.

Et il me semble qu'il y a pas mal d'outils gratuit pour générer les paroles automatiquement ( Vosk par exemple si je me souviens bien)
Bon, je crois que vous n'avez pas tous compris le problème. J'ai pourtant montré un exemple sur Youtube. Je connais le sous-titrage des vidéos pour en avoir déjà installé sur des sites, avec les fichiers (et le timing entré à la main !).
a écrit :
Cela se met à jour tout seul au fur et à mesure qu'une personne parle.

Oui, mais cette fois, rien à voir. On a un paragraphe d'une petite page pour l'apprentissage d'une langue. Une voix récite le texte. Sur chaque phrase est en surimpression un background transparent qui permet de bien suivre la phrase. Quand la voix a terminé la phrase et passe à la suivante, à la ligne, le background passe lui aussi sur la ligne suivante. Rien à voir avec des sous-titres, même si je l'ai évoqué brièvement. Ceci n'empêche d'ailleurs pas les sous-titres ordinaires, qui sont aussi présents sur la page Youtube. Et qui, ce qui renforce ma demande, ne sont pas toujours synchrones avec la page de la vidéo. Le background transparent, lui, il est pile sur la phrase quand elle est récitée.

Faire un background sur une seule ligne et adapté à la longueur de cette ligne, j'ai ce qu'il faut. Mais la synchrone avec les paroles, afin que le background passe à la ligne au bon moment ?
Modifié par Bongota (13 Mar 2024 - 15:59)
Prévenir un modérateur
Répondre au sujet
Aller à