Depuis son apparition en 2006, le format HTML5 s'est imposé sur le Web en devenant le format vidéo standard à la place d'Adobe Flash Player (qui a disparu).
Si aujourd'hui de nombreux logiciels embarquent facilement vos vidéos, les encoder manuellement en HTML5 offre des possibilités infinies de personnalisation et d'hébergement sur votre site.
Cela vous permet notamment d'optimiser les paramètres d'accessibilité de votre vidéo en fonction de vos besoins, en ajoutant les sous-titres que vous souhaitez.
Voici comment encoder correctement les sous-titres sur HTML5.
Comment implémenter correctement votre vidéo HTML5 ?
Tout d'abord, un petit rappel des règles de base pour implémenter une vidéo en HTML5.
Le code est basé sur l'ajout d'une balise
En règle générale, le format MP4 est supporté par tous les navigateurs. Mais vous pouvez ajouter un format OGG pour vous assurer que votre vidéo est lisible par tout le monde.
Pour le reste, l'id identifie votre vidéo, et l'ajout d'un texte à l'intérieur de la balise vidéo garantit que l'utilisateur est averti d'une erreur d'affichage.
Voici à quoi pourrait ressembler une mise en œuvre de votre vidéo :
Sous-titres HTML5 :où les obtenir ?
Maintenant, comment affichez-vous les sous-titres sur votre vidéo ? Le seul format de sous-titre pris en charge par HTML5 est VTT. C'est pourquoi vous devez soit le créer à partir de la transcription, soit utiliser un générateur de sous-titres automatique.
Dans le premier cas, voici le format sur lequel s'appuyer :
Dans le second cas, vous pouvez utiliser notre générateur de fichiers VTT. Avec les technologies de synthèse vocale, vous pouvez créer des sous-titres beaucoup plus rapidement. Vous pouvez également confier votre projet à nos experts en sous-titrage si vous avez un volume plus important.
Voici comment démarrer rapidement :
Téléchargez votre vidéo sur l'interface. Sélectionnez la langue d'origine et celle que vous souhaitez obtenir.
Lorsque le processus de transcription est terminé, vous pouvez accéder à l'éditeur de sous-titres et optimiser le résultat.
Lorsque votre travail est terminé, vous pouvez ensuite exporter le fichier de sous-titres en cliquant sur "Exportation" et télécharger le fichier .vtt.
Comment encoder les sous-titres dans votre vidéo HTML5 ?
Après cela, pour implémenter le sous-titre dans le code HTML5, vous devez ajouter une balise
L'étiquette tag donne le titre de votre sous-titre,genre identifie si c'est subtil ou sous-titré, srclang définit la langue, et src la localisation de votre fichier.
Vous pouvez ensuite ajouter ce code comme ceci :
La vidéo s'affichera alors automatiquement. Notez également que vous pouvez ajouter autant de langues que vous le souhaitez en ajoutant une balise.
Comment puis-je personnaliser le style de mes sous-titres HTML5 ?
Le manuel HTML5 est intéressant par ses nombreuses possibilités pour personnaliser l'apparence de vos sous-titres.
Pour définir leur style, ajoutez une balise CSS