"Die Kraft des Netzwerks liegt in seiner Universalit?t. Für alle zug?nglich ist entscheidend, ob deaktiviert oder nicht." -Tim Berners-Lee

Die Zug?nglichkeit ist für die Entwicklung der Website von entscheidender Bedeutung. Da Videoinhalte immer beliebter werden, w?chst die Nachfrage nach Untertitelinhalten ebenfalls. WebVTT ist eine Technologie, die als Untertitelformat leicht in vorhandene Web -APIs integriert werden kann, wodurch das Problem des Untertitelinhalts gel?st wird.

In diesem Artikel wird dies er?rtert. Natürlich ist WebVTT Untertitel auf der grundlegendsten Ebene, kann jedoch auf verschiedene Weise implementiert werden, wodurch das Video (und den Untertitelinhalt selbst) einfacher zug?nglich ist.

Einführung in das WebVTT -Format

Erstens: WebVTT ist ein Dateityp, der den Text "webVtt" und eine Untertitellinie mit einem Zeitstempel enth?lt. Beispiele sind wie folgt:

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000 - [鳥鳴聲] - 真美好的一天！ 00:00:04.000 --> 00:00:07.000 - [溪流潺潺] - 的確如此！ 00:00:08.000 --> 00:00:10.000 - 你好！</code>

Ein bisschen komisch, aber es macht Sinn, oder? Wie Sie sehen k?nnen, lautet die erste Zeile "WebVTT", gefolgt von dem Zeitbereich der dritten Zeile (0 bis 3 Sekunden in diesem Fall). Zeitbereich ist erforderlich. Andernfalls funktioniert die WebVTT -Datei einfach nicht und sie werden nicht einmal Fehler angezeigt oder protokolliert, um Sie zu informieren. Schlie?lich repr?sentiert jede Zeile unter dem Zeitbereich die Untertitel, die in diesem Bereich enthalten sind.

Beachten Sie, dass Sie mehrere Untertitel in einem einzigen Zeitbereich aufnehmen k?nnen. Ein Bindestrich kann verwendet werden, um den Beginn einer Linie anzuzeigen, aber dies ist nicht notwendig, es ist eher ein Stilproblem.

Der Zeitbereich kann in einem von zwei Formaten sein: HH: MM: ss.tt oder mm: ss.tt. Jeder Abschnitt folgt bestimmte Regeln:

• Stunden (HH): Mindestens zwei Ziffern
• Minuten (mm): zwischen 00 und 59 (inklusive)
• Sekunden: zwischen 00 und 59 (inklusive)
• Millisekunden (TT): zwischen 000 und 999 (inklusive)

Zuerst schien dies ziemlich entmutigend. Sie fragen sich vielleicht, wer all dies manuell tippen und anpassen kann. Glücklicherweise gibt es Tools, die diesen Prozess vereinfachen. Zum Beispiel kann YouTube Ihnen mithilfe der Spracherkennung automatisch Video -Untertitel hinzufügen und Sie auch Untertitel als VTT -Dateien herunterladen! Aber das ist noch nicht alles. WebVTT kann auch mit YouTube verwendet werden, indem Ihre VTT -Datei in Ihr YouTube -Video hochgeladen wird.

Sobald diese Datei erstellt wurde, k?nnen wir sie in das HTML5 -Videoelement einbetten.

<code><video autoplay="autoplay" controls="controls" height="150" width="300"><track default="" kind="captions" label="English" src="your_caption_file.vtt" srclang="en"></track></video></code>

Das Tag ist ein bisschen wie ein Skript, das mit dem Video "abgespielt" wird. Wir k?nnen mehrere Tracks im selben Videoelement verwenden. Die Standardeigenschaft zeigt an, dass die Spur automatisch aktiviert wird.

Schauen wir uns übrigens alle Eigenschaften an:

• Srclang zeigt die Sprache der Spur an.
• Die Art repr?sentiert die Art des Tracks, es gibt fünf Typen:
  • Untertitel sind normalerweise übersetzungen und Beschreibungen verschiedener Teile des Videos.
  • Beschreibt, um Benutzern mit Sehbehinderung zu helfen, zu verstehen, was in Videos passiert.
  • Untertitel bieten eine Alternative zu Audio für Benutzer von H?rern.
  • Metadaten sind ein Track, der vom Skript verwendet wird und vom Benutzer nicht ersichtlich ist.
  • Kapitel helfen bei der Navigation mit Videoinhalten.
• Etikett ist der Titel des Textstracks, der im Untertitelspuren angezeigt wird
• SRC ist die Quelldatei für die Spur. Sofern Crossorigin angegeben ist, kann es nicht aus Cross-Originen kommen.

Obwohl WebVTT für Videos konzipiert ist, k?nnen Sie auch Audiodateien platzieren, indem Sie sie platzieren<video></video> Verwenden Sie es im Element mit Audio.

Erforschen Sie tief die Struktur von WebVTT -Dateien

MDN bietet eine hervorragende Dokumentation und skizziert die K?rperstruktur einer WebVTT -Datei, die bis zu sechs Komponenten enth?lt. Hier ist eine Aufschlüsselung von MDN:

• Optionale Byte -Bestellmarkierung (BOM)
• String "WebVtt"
• Optionaler Texttitel rechts von webVtt.
  • WebVTT muss danach mindestens einen Raum haben.
  • Sie k?nnen es verwenden, um der Datei Beschreibungen hinzuzufügen.
  • Sie k?nnen im Texttitel etwas anderes als eine neue Linie oder Zeichenfolge verwenden.
• Eine leere Linie entspricht zwei aufeinanderfolgenden Newline -Charakteren.
• Null oder mehr Eingabeaufforderungen oder Kommentare.
• Null oder mehr leere Zeilen.

Hinweis: BOM ist ein Unicode -Zeichen, das die Unicode -Codierung der Textdatei angibt.

Mutig, kursiv und unterstrichen - oh mein Gott!

Wir k?nnen definitiv ein Inline -HTML -Format in WebVTT -Dateien verwenden! Diese sind alle allen vertraut: und . Sie verwenden sie genauso wie in HTML.

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000 align:start這是<b>粗體文本</b>00:00:03.000 --> 00:00:06.000 align:middle這是<i>斜體文本</i>00:00:06.000 --> 00:00:09.000 vertical:rl align:middle這是<u>下劃線文本</u></code>

Einstellungseinstellungen

Einstellungseinstellungen sind optionale Textzeichenfolgen, die zur Steuerung des Standorts der Untertitel verwendet werden. Es ist ein bisschen wie die Positionierung von Elementen in CSS, z. B. in der Lage, Untertitel auf Video zu platzieren.

Zum Beispiel k?nnen wir die Untertitel rechts von der Eingabeaufforderung Zeit platzieren, steuern, ob die Untertitel horizontal oder vertikal angezeigt werden, und definieren, wie die Untertitel ausgerichtet und vertikal ausgerichtet sind.

Hier sind die Einstellungen, die wir verwenden k?nnen.

Einstellung 1: Zeile

Die Linie steuert die Position der Untertitel auf der y-Achse. Wenn vertikal angegeben ist (wir werden sp?ter diskutieren), gibt die Zeile stattdessen an, wo die Untertitel auf der X-Achse angezeigt werden.

Ganzzahlen und Prozents?tze sind vollst?ndig akzeptable Einheiten beim Angeben von Linienwerten. Bei der Verwendung von Ganzzahlen ist der Abstand jeder Reihe gleich der H?he der ersten Reihe (aus horizontaler Perspektive). Nehmen wir beispielsweise an, dass die H?he der ersten Zeile des Untertitels gleich 50px ist, der angegebene Linienwert 2 und die Richtung des Untertitels horizontal. Dies bedeutet, dass die Untertitel von oben um 100px (50px -mal 2) abgebaut werden, was h?chstens den Koordinaten der Videogrenze entspricht. Wenn wir eine negative Ganzzahl verwenden, bewegt sich sie von unten nach oben, wenn der Wert abnimmt (oder, wenn vertikal: LR angegeben ist, von rechts nach links und umgekehrt). Seien Sie hier vorsichtig, da Untertitel au?erhalb des Bildschirms platziert werden k?nnen und in verschiedenen Browsern inkonsistent sind. Je gr??er die F?higkeit, desto gr??er ist die Verantwortung!

Im Prozentsatz muss der Wert zwischen 0-100% (inklusive) liegen (Entschuldigung, hier gibt es keinen 200% Riesenwert). Ein h?herer Wert verschiebt die Untertitel von oben nach unten, es sei denn, vertikal: LR oder vertikal: RL wird angegeben. In diesem Fall bewegen sich die Untertitel auf der X-Achse entsprechend.

Mit zunehmendem Wert erscheinen die Untertitel unterhalb der Videogrenze. Wenn der Wert abnimmt (einschlie?lich negativer Werte), erscheinen die Untertitel oben.

Es ist schwer, sich das ohne ein Beispiel vorzustellen, oder? So wird dies in Code konvertiert:

 <code>00:00:00.000 --> 00:00:03.000 line:50%此字幕應水平放置在屏幕的大致中心。</code>

 <code>00:00:03.000 --> 00:00:06.000 vertical:lr line:50%此字幕應垂直放置在屏幕的大致中心。</code>

 <code>00:00:06.000 --> 00:00:09.000 vertical:rl line:-1此字幕應垂直放置在視頻的左側。</code>

 <code>00:00:09.000 --> 00:00:12.000 line:0字幕應水平放置在屏幕頂部。</code>

Einstellung 2: vertikal

Die vertikale gibt an, dass die Untertitel vertikal angezeigt und in die von den Linieneinstellungen angegebene Richtung bewegt werden. Einige Sprachen werden nicht von links nach rechts angezeigt, sondern müssen von oben nach unten angezeigt werden.

<code> 00:00:00.000 --> 00:00:03.000 vertical:rl此字幕應垂直顯示。</code>

 <code>00:00:00.000 --> 00:00:03.000 vertical:lr此字幕應垂直顯示。</code>

Einstellung 3: Position

Position gibt die Position an, in der die Untertitel auf der x-Achse angezeigt werden. Wenn vertikal angegeben ist, gibt die Position stattdessen die Position an, in der die Untertitel auf der y-Achse angezeigt werden. Es muss eine Ganzzahl zwischen 0% und 100% (inklusiv) sein.

 <code>00:00:00.000 --> 00:00:03.000 vertical:rl position:100%此字幕將垂直顯示并在底部。 00:00:03.000 --> 00:00:06.000 vertical:rl position:0%此字幕將垂直顯示并在頂部。</code>

Zu diesem Zeitpunkt k?nnen Sie feststellen, dass Linie und Position den CSS-Flexbox-Eigenschaften ausgerichtet sind, die sich ausgerichtet haben, und der Justify-Content, w?hrend vertikal der Flex-Region sehr ?hnlich ist. Ein Trick, um sich an die WebVTT -Richtung zu erinnern, ist, dass Zeile eine Position senkrecht zum Textstrom angibt und eine Position eine Position parallel zum Textstrom angibt. Wenn wir vertikal angeben, bewegt sich die Linie pl?tzlich entlang der horizontalen Achse und die Position bewegt sich entlang der vertikalen Achse.

Einstellung 4: Gr??e

Gr??e gibt die Breite des Untertitels an. Wenn vertikal angegeben ist, wird stattdessen die H?he der Untertitel festgelegt. Wie bei anderen Einstellungen muss es eine Ganzzahl zwischen 0% und 100% (inklusiv) sein.

 <code>00:00:00.000 --> 00:00:03.000 vertical:rl size:50%此字幕將垂直填充屏幕的一半。</code>

 <code>00:00:03.000 --> 00:00:06.000 position:0%此字幕將水平填充整個屏幕。</code>

Einstellung 5: Ausrichtung

Align gibt an, wo der Text in horizontaler Richtung angezeigt wird. Wenn vertikal angegeben ist, wird stattdessen die vertikale Ausrichtung kontrolliert.

Die Werte, die wir haben, sind: Start, Mitte, Ende, links und rechts. Wenn keine Vertikale angegeben ist, ist die Ausrichtung genau das, wonach sie klingen. Wenn vertikal angegeben ist, werden sie tats?chlich oben, in der Mitte (vertikal) und unten. Die Verwendung von Start und Ende anstelle von links und rechts ist eine flexiblere M?glichkeit, um die Ausrichtung von Klartextwerten auf der Grundlage von Unicode-Bidi-CSS-Attributen zu erm?glichen.

Beachten Sie, dass Align nicht durch vertikal beeinflusst wird: LR oder vertikal: Rl.

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000 align:start此字幕將出現(xiàn)在屏幕左側。 00:00:03.000 --> 00:00:06.000 align:middle此字幕將水平位于屏幕中央。 00:00:06.000 --> 00:00:09.000 vertical:rl align:middle此字幕將垂直位于屏幕中央。 00:00:09.000 --> 00:00:12.000 vertical:rl align:end此字幕將垂直位于屏幕的右下角，而不管vertical:lr 或vertical:rl 的方向如何。 00:00:12.000 --> 00:00:15.000 vertical:lr align:end此字幕將垂直位于屏幕底部，而不管vertical:lr 或vertical:rl 的方向如何。 00:00:12.000 --> 00:00:15.000 align:left此字幕將出現(xiàn)在屏幕左側。 00:00:12.000 --> 00:00:15.000 align:right此字幕將出現(xiàn)在屏幕右側。</code>

WebVTT -Kommentare

WebVTT -Kommentare sind Textzeichenfolgen, die nur beim Lesen von Dateiquellentext sichtbar sind, genau wie die Kommentare, an die wir in HTML, CSS, JavaScript und einer anderen Sprache denken. Kommentare k?nnen Zeilenumbrüche enthalten, aber keine leeren Zeilen (im Wesentlichen zwei Zeilen Neulinen).

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000 - [鳥鳴聲] - 真美好的一天！ NOTE 這是一個注釋。觀看字幕的任何人都不會看到它。 00:00:04.000 --> 00:00:07.000 - [溪流潺潺] - 的確如此！ 00:00:08.000 --> 00:00:10.000 - 你好！</code>

Bei der Parsen und Rendern der Untertiteldatei werden die oben hervorgehobenen Zeilen vor dem Benutzer vollst?ndig versteckt. Kommentare k?nnen auch Multi-Line sein.

Es sind drei sehr wichtige Zeichen/Zeichenfolgen zu beachten, und sie k?nnen nicht für Kommentare verwendet werden: Alternative k?nnen Sie Fluchtzeichen verwenden.

Einige andere interessante WebVTT -Funktionen

Wir werden uns einen kurzen Blick auf einige sehr clevere M?glichkeiten machen, Untertitel anzupassen und zu kontrollieren, aber zumindest zum Zeitpunkt des Schreibens fehlen diesen Methoden eine konsequente Browser -Unterstützung.

Ja, wir k?nnen die Untertitel stylen!

Tats?chlich k?nnen WebVTT -Untertitel gestylt werden. Um den Hintergrund des Untertitels auf Rot festzulegen, stellen Sie die Hintergrundeigenschaft auf das :: cue pseudoelement fest:

 <code>video::cue { background: red; }</code>

Denken Sie daran, wir k?nnen ein Inline -HTML -Format in WebVTT -Dateien verwenden? Nun, wir k?nnen sie auch w?hlen. W?hlen Sie beispielsweise das Italic ( ) -Element aus:

 <code>video::cue(i) { color: yellow; }</code>

Es stellt sich heraus, dass WebVTT -Dateien Stilbl?cke unterstützen, was HTML -Dateien sehr ?hnlich ist:

 <code>WEBVTT STYLE ::cue { color: blue; font-family: "Source Sans Pro", sans-serif; }</code>

Auf Elemente kann auch über ihre schnelle Kennung zugegriffen werden. Beachten Sie, dass die sofortigen Kennung den gleichen Fluchtmechanismus wie HTML verwenden.

 <code>WEBVTT STYLE ::cue(#middle\ cue\ identifier) { text-decoration: underline; } ::cue(#cue\ identifier\ \33) { font-weight: bold; color: red; } first cue identifier 00:00:00.000 --> 00:00:02.000你好，世界！ middle cue identifier 00:00:02.000 --> 00:00:04.000此提示標識符將帶有下劃線！ cue identifier 3 00:00:04.000 --> 00:00:06.000這個不會受到影響，就像第一個一樣！</code>

Verschiedene Arten von Tags

Viele Tags k?nnen verwendet werden, um Untertitel zu formatieren. Es gibt eine Warnung. Diese Tags k?nnen nicht in Elementen mit einer Art Attributkapitel verwendet werden. Hier sind einige formatierte Tags, die Sie verwenden k?nnen.

Klassen -Tags

Wir k?nnen das Klassen -Tag verwenden, um Klassen in WebVTT -Tags zu definieren, und wir k?nnen CSS verwenden, um diese Klassen auszuw?hlen. Angenommen, wir haben eine Klasse, die den Text gelb wird. Wir k?nnen dieses Tag in Untertiteln verwenden. Wir k?nnen viele Stile auf diese Weise steuern, wie Schriftarten, Schriftfarben und Hintergrundfarben.

 <code>/* 我們的CSS 文件*/ .yellowish { color: yellow; } .redcolor { color: red; }</code>

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000此文本應為黃色。此文本將為默認顏色。 00:00:03.000 --> 00:00:06.000此文本應為紅色。此文本將為默認顏色。</code>

Zeitstempel -Tag

Wenn Sie zu einem bestimmten Zeitpunkt Untertitel erscheinen lassen m?chten, müssen Sie ein Zeitstempel -Tag verwenden. Sie sind wie Feinabtitel, um genaue Zeitpunkte zu erzielen. Die Zeit des Tags muss innerhalb eines bestimmten Zeitbereichs der Untertitel liegen, und jedes Zeitstempel -Tag muss sp?ter als der vorherige sein.

 <code>WEBVTT 00:00:00.000 --> 00:00:07.000此文本將顯示超過6 秒。</code>

Sprachetikett

Sprach -Tags sind pr?gnant, weil sie helfen, herauszufinden, wer spricht.

 <code>WEBVTT 00:00:00.000 --> 00:00:03.000鮑勃，你今天過得怎么樣？ 00:00:03.000 --> 00:00:06.000很好，你呢？</code>

Ruby -Tags

Ruby -Tags sind eine M?glichkeit, kleine Kommentarzeichen über Untertiteln anzuzeigen.

 <code>WEBVTT 00:00:00.000 --> 00:00:05.000</code> In diesem Untertitel wird der Text darüber angezeigt<rt> Dieser Text wird über den Untertiteln angezeigt.</rt>

abschlie?end

Das dreht sich um WebVTT! Dies ist eine sehr nützliche Technologie, die die M?glichkeit bietet, die Zug?nglichkeit Ihrer Website erheblich zu verbessern, insbesondere wenn Sie Videos verwenden. Versuchen Sie, einige Untertitel selbst zu schreiben, um eine bessere Vorstellung davon zu bekommen!

Das obige ist der detaillierte Inhalt vonVerbesserung der Video -Zug?nglichkeit mit WebVTT. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!