Depuis son introduction en 2006, le format HTML5 a conquis internet, en s’imposant notamment comme le format vidéo de référence face à Adobe Flash Player (qu’il a remplacé).
Si aujourd’hui de nombreux logiciels permettent de créer des vidéos en un clic, coder manuellement en HTML5 vous donne de nombreuses possibilités de personnaliser et d’héberger le format sur votre site internet.
Cela vous permet notamment d’optimiser les paramètres d’accessibilité de votre vidéo selon vos besoins, en ajoutant les sous-titres que vous voulez.
Voici comment coder correctement des sous-titres sur HTML5.
Tout d’abord, un petit rappel sur les règles élémentaires pour implanter une vidéo en HTML5.
Le code consiste à ajouter une balise <video </video> dans votre HTML. La balise controls assure que votre lecteur vidéo affiche des options de lecture si vous l’activez. Vous pouvez aussi définir la résolution de la vidéo avec width et height. Pour donner les références de votre vidéo, vous avez besoin d’ajouter la balise source src, en précisant le format de votre vidéo avec type.
En règle général, le format MP4 est accepté par tous les navigateurs. Mais vous pouvez ajouter le format OGG en plus pour être sûr que votre vidéo soit lisible par tout le monde.
Pour ce qui est du reste, la balise id vous permet d’identifier directement votre vidéo. Ensuite, ajouter un texte à l’intérieur de la balise vidéo assure que l’utilisateur soit prévenu d’une erreur d’affichage.
Voici à quoi peut ressembler une implantation de votre vidéo :
Maintenant, comment afficher des sous-titres sur votre vidéo ? Le seul format de sous-titre supporté par le HTML5 est le VTT. C’est pourquoi, vous devez soit le créer à partir d’une transcription, soit vous aidez d’un générateur automatique de sous-titre.
Dans le premier cas, voici le format à respecter :
Dans le second cas, vous pouvez utiliser notre générateur de fichier VTT Checksub. Avec sa technologie de reconnaissance vocale, il vous permet de gagner du temps dans la création de vos sous-titres. Vous pouvez aussi solliciter directement nos professionnels du sous-titrage si vous avez un gros volume.
Voici comment s’y prendre rapidement :
Uploadez votre vidéo sur l’interface. Choisissez la langue originale de votre vidéo et celle que vous voulez éventuellement traduire.
Quand la transcription est terminée, vous pouvez accéder à l’éditeur de sous-titre et optimiser le résultat apporté.
Quand vous êtes satisfait de la transcription, vous pouvez exporter le fichier de sous-titre en cliquant sur « Exportation » et en téléchargeant le fichier VTT.
Pour ensuite implanter le sous-titre dans le code HTML5, vous devez ajouter une balise <track> comme suit :
La balise label donne le titre de votre sous-titre, kind identifie si ce sont des subtiles ou captions, srclang définit la langue, et src la localisation de votre fichier.
Vous pouvez alors ajouter ce code comme ceci :
La vidéo va alors s’afficher automatiquement
À préciser que vous pouvez ajouter le nombre de langues que vous voulez en rajoutant une balise <track>.
Le HTML5 manuel est intéressant dans ses nombreuses possibilités de personnalisation dans l’apparence de vos sous-titres.
Pour gérer le style, vous devez ajouter une balise CSS <style>, puis identifié votre vidéo sous la forme #grow_audience : : cue { },
A l’intérieur de cue {}, voici les différentes balises que vous pouvez utiliser:
À la fin, cela donne un résultat comme cela:
Avec cela, vous aurez les sous-titres qui correspondent le mieux à vos besoins. On espère vous avoir aidé dans les méandres de l’HTML !
