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>
Dem
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.000All 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
Umriss-Stenografie-Leistung
Schriftart-Stenografie-Attribut
== Hinweis: : : Cue-Stil des Cues. Funktioniert derzeit auf Chrome, Opera und Safari, aber noch nicht auf Firefox. ==
//设置字幕的样式 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 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: 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!