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

Cet article présente principalement l'utilisation et la production de sous-titres vidéo HTML5. HTML5 nous permet d'utiliser des éléments pour spécifier des sous-titres pour les vidéos. Les amis dans le besoin peuvent se référer à ce qui suit

HTML5 nous permet d'utiliser des éléments pour spécifier. sous-titres pour les vidéos. 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="video"  controls>
    <source src="./step.mp4" type="video/mp4">
    <track label="中文字幕" kind="subtitles" chapters metadata 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>

Introduction à l'attribut de piste :

• 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 se trouve cet ensemble de sous-titres - comme l'anglais ou l'allemand - ces étiquettes apparaîtront dans l'interface utilisateur pour permettre Les utilisateurs sélectionnent facilement la langue des sous-titres qu’ils souhaitent voir.

• src se voit attribuer dans chaque cas une URL valide pointant vers le fichier de sous-titres WebVTT concerné.

• 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 définition spécifique. sélection.

Fichier de sous-titres WebVTT

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 un fichier Web format de piste de texte vidéo (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 de convertisseurs en ligne tels que srt2vtt.

Spécification du format de fichier :

Le suffixe du fichier est ==.vtt==

==.vtt==Le type MIME de le fichier est text/vtt

Sous les navigateurs Chrome et Firefox, les sous-titres .vtt peuvent être chargés et affichés sans aucun problème. Cependant, pour les navigateurs IE10+, bien que les sous-titres .vtt soient également pris en charge, le type MIME doit être. défini, sinon il ignorera le format WebVTT. 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.

//Doit déclarer ==WEBVTT==
WEBVTT
// Heure de début --> Heure de fin en millisecondes au début du fichier
00:00 00:00:03.001 ---> 00:00:06.000
053d7cb071a67aeff6e3edf21e104ddeTous les dieux et démons des cieux 22227304df2b4245f4682191bb80317afa07
00:00:06.001 --> 09.000
Avec mon sang3333
00:00:09.001 --> 00:00:12.000
Sacrifice 4444
00:00:12.001 --->生七世5555



Paramètre de style CSS des sous-titres

::La clé du pseudo-élément cue est de cibler les indices de piste de texte individuels pour le style, car il correspond à n’importe quel club limité. Seules quelques propriétés CSS peuvent être appliquées aux astuces de texte :

color

• opacity

• visibilité

• texte-décoration

• texte-ombre

• performance abrégée en arrière-plan

• performances du raccourci de contour

• attribut de raccourci de police

• hauteur de ligne

• white-space

• == 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== et l'italique ==i. == balise, soulignement ==u== balise et ==ruby== et ==lang== balises, etc.

//设置字幕的样式
video::cue{
    background-color:transparent;
    color:white;
    font-size:20px;
    line-height: 100px;
}
// 设置单行字幕的样式 
video::cue(v[voice=aa]){
    color:green;
}
video::cue(v[voice=bb]){
    color:rgb(0, 26, 128);
}

Compatible avec les navigateurs

IEPar défaut, Internet Explorer 10 + Sous-titres 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+ a une prise en charge similaire pour Internet Explorer 10+, Displays un menu avec les différentes options disponibles et ajoute une option "auto" qui permet au navigateur de faire une sélection.

Chrome et Opera

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 default et essaient plutôt de faire correspondre la langue du navigateur avec la langue du sous-titre

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!