Comment utiliser et créer des sous-titres vidéo HTML5

HTML5 nous permet de spécifier des sous-titres pour les vidéos à l'aide d'éléments. Diverses propriétés de cet élément nous permettent de spécifier des éléments tels que le type de contenu que nous ajoutons, la langue dans laquelle il se trouve et bien sûr une référence au fichier texte qui contient les informations réelles des sous-titres.

 <video id=contrôles vidéo> <source src=./step.mp4 type=video/mp4> <track label=中文字幕kind=sous-titres chapitres métadonnées srclang=zh src=./caption.vtt default> <track label=ABC kind=subtitles srclang=de src=./caption1.vtt> <track label=Number kind=subtitles srclang=es src=./caption2.vtt> </video>

• kind se voit attribuer une valeur sous-titres, indiquant le type de contenu que contient le fichier.
• L'étiquette reçoit une valeur indiquant la langue dans laquelle cet ensemble de sous-titres est écrit - comme l'anglais ou l'allemand - et ces étiquettes apparaîtront dans l'interface utilisateur pour permettre à l'utilisateur de sélectionner facilement la langue dans laquelle il souhaite voir les sous-titres.
• src se voit attribuer dans chaque cas une URL valide pointant vers le fichier de sous-titres WebVTT correspondant.
• srclang indique la langue dans laquelle se trouve le contenu de chaque fichier de sous-titres.
• L'attribut par défaut est défini sur l'élément anglais pour indiquer au navigateur qu'il s'agit de la définition de fichier de sous-titres par défaut à utiliser lorsque les sous-titres sont activés et que l'utilisateur n'a pas effectué de sélection spécifique.

Le fichier contenant les données de sous-titres réelles est un simple fichier texte qui suit un format spécifié, dans ce cas le format Web Video Text Track (WebVTT). La spécification du plug-in WebVTT est encore en cours de développement, mais ses principales parties sont stables, nous pouvons donc l'utiliser aujourd'hui.

Les fournisseurs de vidéos tels que Blender Foundation fournissent des sous-titres et des sous-titres au format texte pour leurs vidéos, mais généralement au format SubRip Text (SRT). Ceux-ci peuvent être convertis en WebVTT à l'aide d'un convertisseur en ligne tel que srt2vtt.

L'extension du fichier est ==.vtt==

==.vtt==Le type MIME du fichier est text/vtt

Sous les navigateurs Chrome et Firefox, les sous-titres .vtt peuvent être chargés et affichés sans aucun obstacle. Cependant, pour les navigateurs IE10+, bien que les sous-titres .vtt soient également pris en charge, le type MIME doit être défini, sinon le format WebVTT sera ignoré. Un moyen plus simple consiste à ajouter un fichier .htaccess sous le dossier où se trouvent les sous-titres et à y écrire AddType text/vtt .vtt.

//Vous devez déclarer ==WEBVTT== en début de fichier

WEBVTT

//Heure de début -> Heure de fin, l'unité est en millisecondes

00:00:00.001 --> 00:00:03.000

// Afficher les sous-titres correspondant à l'heure ci-dessus. Le style peut être défini séparément aa est similaire au nom de la classe.

<v aa>Neuf Yinling du Néant 1111</v>

00:00:03.001 --> 00:00:06.000

<v bb>Dieux et Démons 2222</v>

00:00:06.001 --> 00:00:09.000

Avec mon corps de sang 3333

00:00:09.001 --> 00:00:12.000

Sacrifice 4444

00:00:12.001 --> 00:00:15.000

Trois vies et sept vies 5555

Le pseudo-élément ::cue est la clé pour cibler des repères de piste de texte individuels à des fins de style, car il correspond à n'importe quel repère défini. Seules quelques propriétés CSS peuvent être appliquées aux astuces textuelles :

• couleur
• opacité
• visibilité
• décoration de texte
• texte-ombre
• performances sténographiques en arrière-plan
• décrire les performances en sténographie
• attribut de raccourci de police
• hauteur de ligne
• espace blanc

==Remarque : : les styles de repère de ::cue fonctionnent actuellement sur Chrome, Opera et Safari, mais pas encore sur Firefox. ==

WebVTT prend également en charge certaines balises HTML pour le contrôle du style. Les plus courantes incluent la balise sound ==v==, la balise color ==c==, la balise bold ==b==, la balise italic ==i== et le soulignement ==u. == balise, ainsi que les balises ==ruby== et ==lang==, etc.

 //Définissez le style des sous-titres video::cue{ background-color:transparent; color:white; font-size:20px; line-height: 100px;}//Définissez le style des sous-titres sur une seule ligne video::cue( v[voice= aa]){ color:green;}video::cue(v[voice=bb]){ color:rgb(0, 26, 128);}

IE

Par défaut, les sous-titres d'Internet Explorer 10+ sont activés et le contrôle par défaut contient un bouton et un menu qui offrent les mêmes fonctionnalités que le menu que nous venons de créer. L'attribut par défaut est également pris en charge.

==Remarque : IE ignorera complètement les fichiers WebVTT à moins que vous ne définissiez un type MIME. Cela peut être facilement fait en ajoutant un fichier .htaccess au répertoire approprié contenant AddType text/vtt .vtt==

Safari

Safari 6.1+ prend en charge de manière similaire Internet Explorer 10+, affichant un menu avec différentes options disponibles et ajoutant une option automatique permettant au navigateur de faire une sélection.

Chrome et Opéra

Ces navigateurs ont des implémentations similaires : les sous-titres sont activés par défaut et le jeu de contrôles par défaut contient un bouton « cc » qui active et désactive les sous-titres. Chrome et Opera ignorent l'attribut de l'élément par défaut et tentent à la place de faire correspondre la langue du navigateur à celle des sous-titres.

Ce qui précède est la méthode d'utilisation et de création de sous-titres vidéo HTML5 introduite par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !