Comment mettre en œuvre la vidéo H5 et faire fonctionner le barrage

Cette fois, je vais vous montrer comment mettre en œuvre la vidéo H5 et faire fonctionner le barrage. Quelles sont les précautions pour la mise en œuvre et le fonctionnement de la vidéo H5. Voici des cas pratiques.

HTML5 nous permet de spécifier des sous-titres pour les vidéos à l'aide de l'élément. 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 contenu dans 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 à l'utilisateur de sélectionner facilement la langue qu'il souhaite voir les sous-titres en .

• 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
Dieux et démons de tous les cieux 2222
00:00:06.001 --> 09.000
Avec mon sang3333
00:00:09.001 --> 00:00:12.000
Sacrifice 4444
00:00:12.001 --> 00:00:15.000
三生七世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

• performances de sténographie d'arrière-plan

• performances de sténographie de contour

• attribut de sténographie de police
hauteur de ligne
espace blanc

• == Remarque : : style de repère Fonctionne 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.

Compatible avec les navigateurs

//设置字幕的样式
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);
}

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+ 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 sur l'élément par défaut et essaient plutôt de faire correspondre la langue du navigateur avec la langue des sous-titres

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour plus de passionnant. contenu, veuillez faire attention aux autres sites Web chinois php Articles connexes !

Lecture recommandée :

Explication détaillée des étapes pour développer le framework mpvue avec Vue.js

Le plug-in jquery fullpage ajoute liés aux droits d'auteur de l'en-tête et de la queue

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!