Il n'a jamais été aussi facile de graver vos sous-titres dans les vidéos de votre site Web.
Mais les encoder manuellement en HTML offre des possibilités infinies de personnalisation et d'hébergement.
Dans ce guide, on aborde tout ce que vous devez savoir sur l'ajout de sous-titres à votre vidéo HTML.
Lorsque vous souhaitez ajouter des sous-titres à votre vidéo HTML, le format le plus courant et le plus recommandé est WebVTT (.vtt).
WebVTT est largement pris en charge par les navigateurs modernes et est spécialement conçu pour une utilisation sur le Web. Il vous permet d'inclure des détails supplémentaires tels que le style et le positionnement du texte, ce qui peut améliorer l'expérience de visionnage pour votre public.
Un autre format que vous pouvez utiliser est SRT (.srt). Les fichiers SRT sont plus simples et ne disposent pas des fonctionnalités avancées de WebVTT, telles que le style et le positionnement personnalisés. SRT fonctionne bien pour les besoins de base en matière de sous-titres, mais il n'offre pas beaucoup de flexibilité en termes d'apparence.
Les fichiers SRT sont compatibles avec la plupart des lecteurs multimédia, mais il se peut qu'ils ne vous offrent pas les options de personnalisation souhaitées pour une utilisation sur le Web.
WebVTT est donc souvent le meilleur choix en raison de sa polyvalence.
L'ajout de sous-titres à votre vidéo HTML peut se faire en quelques étapes simples. Voici un guide étape par étape pour vous aider à implémenter des sous-titres dans votre vidéo à l'aide du format WebVTT.
Tout d'abord, vous devez créer un fichier WebVTT pour vos sous-titres. Vous pouvez utiliser un éditeur de texte tel que le Bloc-notes ou n'importe quel éditeur de code pour le créer. Le fichier doit porter l'extension .vtt. Dans votre fichier WebVTT, vous allez écrire le texte de vos sous-titres ainsi que des horodatages qui spécifient quand chaque ligne doit apparaître et disparaître à l'écran.
Voici un exemple simple de ce à quoi pourrait ressembler votre fichier WebVTT :
WEBVTT
00:00:00.000 --> 00:00:05.000
Bienvenue dans notre didacticiel vidéo.
00:00:05.001 --> 00:00:10.000
Dans cette vidéo, nous allons vous montrer comment ajouter des sous-titres à votre vidéo HTML.
Assurez-vous que les horodatages sont exacts afin que les sous-titres soient synchronisés avec le son de votre vidéo.
Une fois que vous avez créé votre fichier WebVTT, l'étape suivante consiste à l'ajouter à votre vidéo HTML. Pour ce faire, vous devez utiliser le <track> élément à l'intérieur du <video> balise dans votre code HTML.
Voici un exemple d'ajout de sous-titres à votre vidéo :
<video controls>
<source src="your-video.mp4" type="video/mp4">
<track src="your-subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>
Dans ce code, <track> L'élément est utilisé pour lier le fichier WebVTT à la vidéo. Le sorte L'attribut est réglé sur « sous-titres » pour indiquer que la piste contient des sous-titres. Le erclang l'attribut spécifie la langue des sous-titres, et étiquette L'attribut fournit un nom pour la piste de sous-titres que les utilisateurs peuvent voir lorsqu'ils sélectionnent les options de sous-titres.
Après avoir ajouté le fichier WebVTT à votre code HTML, vous devez tester votre vidéo pour vous assurer que les sous-titres fonctionnent correctement. Ouvrez le fichier HTML dans un navigateur, regardez la vidéo et vérifiez si les sous-titres apparaissent au bon moment. Assurez-vous qu'ils sont correctement synchronisés avec le son et que tout le texte s'affiche comme prévu.
Si vos sous-titres n'apparaissent pas, vous pouvez vérifier certaines choses. Tout d'abord, assurez-vous que le chemin d'accès à votre fichier WebVTT est correct. Assurez-vous également que le fichier contient la bonne .vtt extension et que les horodatages sont correctement formatés. Enfin, vérifiez que votre navigateur est compatible avec WebVTT, contrairement à la plupart des navigateurs modernes.
Le style de vos sous-titres est une étape importante pour vous assurer qu'ils sont beaux et faciles à lire. En personnalisant le style, vous pouvez adapter les sous-titres à l'esthétique générale de votre vidéo, afin de les rendre moins distrayants et plus attrayants visuellement. Voici comment personnaliser vos sous-titres étape par étape.
::cue Pseudo-élémentPour personnaliser vos sous-titres WebVTT, vous devez utiliser le ::signal pseudo-élément dans votre CSS. Le ::signal Un sélecteur vous permet de définir l'apparence du texte de vos sous-titres. Vous pouvez modifier la taille de la police, la couleur, l'arrière-plan et même ajouter des ombres pour faire ressortir davantage le texte.
Voici un exemple d'utilisation du ::cue pseudo-élément :
::cue {
color: white;
background: rgba(0, 0, 0, 0.7);
font-size: 16px;
text-shadow: 1px 1px 2px black;
}
Danscet exemple, le texte des sous-titres sera blanc, avec un fond noir semi-transparent et une ombre subtile pour le rendre plus lisible sur les différents arrière-plans de la vidéo.
Vous pouvez personnaliser la police et les couleurs pour mieux les adapter à votre marque ou au ton de votre vidéo. Par exemple, si votre vidéo a un arrière-plan clair, vous pouvez utiliser des couleurs de texte plus foncées pour une meilleure visibilité. Essayez différentes combinaisons pour trouver celle qui fonctionne le mieux.
::cue {
font-family: Arial, sans-serif;
font-size: 18px;
color: #ffcc00;
background: rgba(0, 0, 0, 0.5);
}
Dans cet exemple, nous avons remplacé la police par Arial, augmenté la taille de la police et utilisé une couleur jaune vif pour le texte afin de le faire ressortir.
Après avoir ajouté vos styles, il est important de les tester sur différents navigateurs et appareils. Assurez-vous que les sous-titres sont lisibles et qu'ils ne chevauchent pas des parties importantes de votre vidéo. Testez avec différentes scènes vidéo pour vous assurer que les sous-titres restent visibles quel que soit l'arrière-plan.
Si vous trouvez que vos sous-titres ne sont pas aussi lisibles que vous le souhaiteriez, ajustez le style jusqu'à ce que vous soyez satisfait. Vous devrez peut-être augmenter le contraste entre le texte et l'arrière-plan ou ajuster la taille de la police pour une meilleure lisibilité.
En suivant ces étapes, vous pouvez vous assurer que vos sous-titres fournissent non seulement les informations nécessaires, mais améliorent également l'expérience visuelle globale en étant bien stylisés et faciles à lire.
L'ajout manuel de sous-titres peut prendre beaucoup de temps, mais des outils tels que Checksub facilitent grandement le processus. :
Tout d'abord, téléchargez votre vidéo sur la plateforme Checksub. C'est facile à faire : il vous suffit de cliquer sur le bouton de téléchargement et de sélectionner votre fichier vidéo. Une fois mise en ligne, vous devez choisir la langue d'origine de votre vidéo. Si vous souhaitez des sous-titres dans plusieurs langues, vous pouvez sélectionner ces langues à ce stade.
Checksub utilise une technologie avancée de reconnaissance vocale pour générer automatiquement des sous-titres pour votre vidéo. Cette fonctionnalité vous permet de gagner beaucoup de temps par rapport à la saisie manuelle. Une fois les sous-titres générés, vous pouvez utiliser l'éditeur Checksub pour effectuer des ajustements et vous assurer que tout est exact.
Après avoir généré les sous-titres, vous pouvez facilement les modifier sur la plateforme de Checksub. L'éditeur vous permet de corriger les erreurs, d'ajuster le timing et même de scinder ou de fusionner des segments de sous-titres selon vos besoins. Cela garantit que vos sous-titres sont parfaitement synchronisés avec le son.
Une fois que vous êtes satisfait des sous-titres, vous pouvez les exporter au format WebVTT. Ce format de fichier est idéal pour les vidéos HTML et garantit la compatibilité avec tous les principaux navigateurs. Après l'exportation, vous pouvez ajouter le fichier WebVTT à votre vidéo HTML en suivant les étapes mentionnées précédemment.
Vous souhaitez générer rapidement des sous-titres précis et de haute qualité ? Essayez Checksub gratuitement.
