Verbesserung der Video -Zugänglichkeit mit WebVTT

"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此字幕将出现在屏幕左侧。 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此字幕将出现在屏幕左侧。 00:00:12.000 --> 00:00:15.000 align:right此字幕将出现在屏幕右侧。</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!