So verwenden und erstellen Sie HTML5-Videountertitel

In diesem Artikel wird hauptsächlich die Verwendung und Produktion von HTML5-Videountertiteln vorgestellt. HTML5 ermöglicht es uns, Elemente zur Spezifikation von Untertiteln für Videos zu verwenden.

HTML5 ermöglicht uns die Verwendung von Elementen zur Spezifikation Untertitel für Videos. 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"  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>

Track-Attribut-Einführung:

• Art wird ein Wert Untertitel zugewiesen, was bedeutet Die Art des Inhalts, den die Datei enthält

• label erhält einen Wert, der die Sprache angibt, in der dieser Untertitelsatz vorliegt – z. B. Englisch oder Deutsch – diese Labels werden in der Benutzeroberfläche angezeigt, um dies zu ermöglichen Benutzer können ganz einfach die Untertitelsprache auswählen, die sie sehen möchten.

• 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 standardmäßige Untertiteldateidefinition ist, die verwendet werden soll, wenn Untertitel aktiviert sind und der Benutzer keine spezifischen Angaben gemacht hat Auswahl.

WebVTT-Untertiteldatei

Die Datei mit den eigentlichen Untertiteldaten ist eine einfache Textdatei, die einem bestimmten Format folgt, in diesem Fall ein 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 Blender Foundation stellen Untertitel und Untertitel im Textformat für ihre Videos zur Verfügung, normalerweise jedoch im SubRip Text (SRT)-Format. Diese können mit Online-Konvertern wie srt2vtt in WebVTT konvertiert werden.

Dateiformatspezifikation:

Das Suffix der Datei ist ==.vtt==

==.vtt==Der MIME-Typ von Die 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 vorhanden sein definiert, 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 deklariert werden ==WEBVTT==
WEBVTT
// Startzeit --> Endzeit in Millisekunden am Anfang der Datei
00:00
00:00:03.001 --> 00:00:06.000
All Heavens Gods and Demons 2222
00:00:06.001 --> 09.000
Mit meinem Blut3333
00:00:09.001 --> 00:00:12.000
Opfer 4444
00:00:12.001 --> 00:00:15.000
三生七世5555

Untertitel-CSS-Stileinstellung

::Der Schlüssel zum Cue-Pseudoelement besteht darin, einzelne Textspur-Cues für das Styling gezielt zu verwenden passt zu jedem limitierten Verein. Es gibt nur wenige CSS-Eigenschaften, die auf Texthinweise angewendet werden können:

Farbe
Opazität
Sichtbarkeit
Textdekoration
Textschatten
Hintergrund-Kurzschriftleistung
Umriss der Kurzschriftleistung
Schriftart-Kurzschriftattribut
Zeilenhöhe
white-space
== 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 Stilkontrolle. Zu den gängigen gehören das Tag „sound“ ==v==, das Tag „color“ ==c==, das Tag „bold“ ==b== und das Tag „italic“ ==i ==-Tag, Unterstrich ==u==-Tag und ==ruby==- und ==lang==-Tags usw.

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

Browserkompatibel

IE

Untertitel für Internet Explorer 10+ sind standardmäßig aktiviert. und das Standardsteuerelement enthält eine Schaltfläche und ein Menü, das die gleiche Funktionalität bietet wie das gerade erstellte Menü. 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==

Safari

Safari 6.1+ erreicht werden, das eine ähnliche Unterstützung für Internet Explorer 10+ und Displays bietet ein Menü mit den verschiedenen verfügbaren Optionen und fügt eine „Auto“-Option hinzu, die es dem Browser ermöglicht, eine Auswahl zu treffen.

Chrome und Opera

Diese Browser haben ä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 Elements default und versuchen stattdessen, die Sprache des Browsers mit der Sprache des Untertitels abzugleichen

Das obige ist der detaillierte Inhalt vonSo verwenden und erstellen Sie HTML5-Videountertitel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!