So implementieren Sie H5-Video und bedienen Sperrfeuer

Dieses Mal zeige ich Ihnen, wie Sie H5-Video implementieren und Sperrfeuer bedienen. Hier sind praktische Beispiele. HTML5 ermöglicht es uns, Untertitel für Videos mithilfe des Elements anzugeben. 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>

Attribut Einführung des Titels:

Art wird ein Wert Untertitel zugewiesen, der die Art des in der Datei enthaltenen Inhalts angibt

• Dem

Label wird ein Wert zugewiesen, der die Sprache angibt, in der dieser Untertitelsatz verfasst ist – etwa Englisch oder Deutsch – und diese Labels werden in der Benutzeroberfläche angezeigt, damit der Benutzer die gewünschte Sprache einfach auswählen kann Ich möchte die Untertitel sehen.
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 darin AddType text/vtt .vtt 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-Stenografie-Leistung

• Umriss-Stenografie-Leistung

• Schriftart-Stenografie-Attribut

• Linienhöhe

• Leerraum

• == Hinweis: : : Cue-Stil des Cues. Funktioniert derzeit auf Chrome, Opera und Safari, aber 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

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 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 lässt sich leicht bewerkstelligen, indem Sie dem entsprechenden Verzeichnis eine .htaccess-Datei hinzufügen, die AddType text/vtt enthält 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 Standardelements und versuchen stattdessen, die Sprache des Browsers mit der Sprache der Untertitel abzugleichen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben Spannender Inhalt, bitte achten Sie auf andere php-chinesische Websites. Verwandte Artikel!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Entwicklung des MPvue-Frameworks mit Vue.js

Das JQuery-Ganzseiten-Plug-In fügt hinzu Header und Tail urheberrechtlich geschützt

Das obige ist der detaillierte Inhalt vonSo implementieren Sie H5-Video und bedienen Sperrfeuer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!