So verwenden und erstellen Sie HTML5-Videountertitel

Mit HTML5 können wir Untertitel für Videos mithilfe von Elementen festlegen. Mithilfe verschiedener Eigenschaften dieses Elements können wir beispielsweise die Art des Inhalts angeben, den wir hinzufügen, die Sprache, in der er vorliegt, und natürlich einen Verweis auf die Textdatei, die die eigentlichen Untertitelinformationen enthält.

 <Video-ID=Video-Steuerelemente> <Quelle src=./step.mp4 Typ=Video/mp4> <Track Label=中文字幕kind=Untertitel Kapitel Metadaten srclang=zh src=./caption.vtt Standard> <Track Label=ABC kind=subtitles srclang=de src=./caption1.vtt> <track label=Nummer kind=subtitles srclang=es src=./caption2.vtt> </video>

• kind wird der Wert subtitles zugewiesen, der die Art des Inhalts angibt, den die Datei enthält.
• Der Bezeichnung wird ein Wert zugewiesen, der die Sprache angibt, in der dieser Untertitelsatz geschrieben ist – beispielsweise Englisch oder Deutsch – und diese Bezeichnungen werden in der Benutzeroberfläche angezeigt, damit der Benutzer einfach die Sprache auswählen kann, in der er die Untertitel sehen möchte.
• src wird jeweils eine gültige URL zugewiesen, die auf die entsprechende WebVTT-Untertiteldatei verweist.
• srclang gibt die Sprache an, in der sich der Inhalt jeder Untertiteldatei befindet.
• Das Standardattribut wird für das englische Element festgelegt, um dem Browser anzuzeigen, dass dies die Standarddefinition für die Untertiteldatei ist, die verwendet werden soll, wenn Untertitel aktiviert sind und der Benutzer keine bestimmte Auswahl getroffen hat.

Die Datei mit den eigentlichen Untertiteldaten ist eine einfache Textdatei, die einem bestimmten Format folgt, in diesem Fall dem Web Video Text Track (WebVTT)-Format. Die WebVTT-Plug-in-Spezifikation befindet sich noch in der Entwicklung, aber die Hauptteile davon sind stabil, sodass wir sie heute verwenden können.

Videoanbieter wie die Blender Foundation stellen für ihre Videos Untertitel und Untertitel im Textformat zur Verfügung, meist jedoch im SubRip Text (SRT)-Format. Diese können mit Online-Konvertern wie srt2vtt in WebVTT konvertiert werden.

Die Dateierweiterung ist ==.vtt==

==.vtt==Der MIME-Typ der Datei ist text/vtt

Unter Chrome- und Firefox-Browsern können .vtt-Untertitel problemlos geladen und angezeigt werden. Für IE10+-Browser werden jedoch auch .vtt-Untertitel unterstützt, der MIME-Typ muss jedoch definiert werden, andernfalls wird das WebVTT-Format ignoriert. Eine einfachere Möglichkeit besteht darin, eine .htaccess-Datei unter dem Ordner hinzuzufügen, in dem sich die Untertitel befinden, und AddType text/vtt .vtt darin zu schreiben.

//Muss ==WEBVTT== am Anfang der Datei deklarieren

WEBVTT

//Startzeit -> Endzeit, Einheit ist Millisekunden

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

// Untertitel entsprechend der oben genannten Zeit anzeigen. Der Stil kann separat eingestellt werden, ähnlich wie der Klassenname.

<v aa>Neun Nether-Yinling 1111</v>

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

<v bb>Götter und Dämonen 2222</v>

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

Mit meinem Blutkörper 3333

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

Opfer 4444

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

Drei Leben und sieben Leben 5555

Das ::cue-Pseudoelement ist der Schlüssel zum Targeting einzelner Textspur-Cues für Stylingzwecke, da es mit jedem definierten Cue übereinstimmt. Es gibt nur wenige CSS-Eigenschaften, die auf Texthinweise angewendet werden können:

• Farbe
• Opazität
• Sichtweite
• Textdekoration
• Textschatten
• Stenographie im Hintergrund
• Skizzieren Sie die stenografische Leistung
• Schriftart-Kurzschrift-Attribut
• Zeilenhöhe
• Leerraum

==Hinweis: Die Cue-Stile von ::cue funktionieren derzeit auf Chrome, Opera und Safari, jedoch noch nicht auf Firefox. ==

WebVTT unterstützt auch einige HTML-Tags zur Stilsteuerung, darunter das Tag „sound“ ==v==, das Tag „color“ ==c==, das Tag „bold“ ==b==, das Tag „italic“ ==i== und das Tag „underline“ ==u ==-Tag sowie ==ruby==- und ==lang==-Tags usw.

 //Legen Sie den Stil der Untertitel fest. video::cue{ background-color:transparent; color:white; v[voice= aa]){ color:green;}video::cue(v[voice=bb]){ color:rgb(0, 26, 128);}

IE

Standardmäßig sind Untertitel für Internet Explorer 10+ aktiviert und das Standardsteuerelement enthält eine Schaltfläche und ein Menü, das die gleiche Funktionalität wie das gerade erstellte Menü bietet. Das Standardattribut wird ebenfalls unterstützt.

==Hinweis: IE ignoriert WebVTT-Dateien vollständig, es sei denn, Sie definieren einen MIME-Typ. Dies kann einfach durch Hinzufügen einer .htaccess-Datei zum entsprechenden Verzeichnis mit AddType text/vtt .vtt== erfolgen

Safari

Safari 6.1+ bietet ähnliche Unterstützung für Internet Explorer 10+, zeigt ein Menü mit verschiedenen verfügbaren Optionen an und fügt eine automatische Option hinzu, die es dem Browser ermöglicht, eine Auswahl zu treffen.

Chrome und Opera

Diese Browser verfügen über ähnliche Implementierungen: Untertitel sind standardmäßig aktiviert und der Standardsteuersatz enthält eine „CC“-Schaltfläche, die Untertitel ein- und ausschaltet. Chrome und Opera ignorieren das Attribut des Standardelements und versuchen stattdessen, die Sprache des Browsers an die Sprache des Untertitels anzupassen

Die oben beschriebene Methode zur Verwendung und Erstellung von HTML5-Videountertiteln wird Ihnen hoffentlich weiterhelfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!