Zugrunde nach Audiobeschreibungen für HTML5 -Video

Zusammenfassung der Schlüsselpunkte

• Die herkömmliche Audiobeschreibung sehbehinderte Audio -Beschreibung erfordert, dass professionelle Videobearbeitungsgeräte codiert und in eine separate Audiospur einer Videodatei eingebettet werden können. Dieser Prozess ist für die meisten Inhaltsersteller oft unrealistisch.
• HTML5 -Videospezifikation liefert das audioTracks -Objekt, das theoretisch die Implementierung von Schalttasten für Audiobeschreibungen ermöglicht und die Audio- und Videovolumina separat steuert. Browser haben derzeit jedoch nur begrenzte Unterstützung für diese Funktion.
• Eine andere Lösung besteht darin, MediaController, eine Funktion von HTML5 -Audio und -Video, zu verwenden, mit der mehrere Quellen synchronisiert werden können. Diese Funktion ist derzeit in der Browser -Unterstützung begrenzt, kann jedoch vorhandene, weit verbreitete Funktionen verwenden, um zwei Mediendateien gleichzeitig synchronisiert zu halten.
• Die Video -API bietet Ereignisse wie Spielen, Pause, Ende und Timeupdate, um die Audio -Wiedergabe mit Videoereignissen zu synchronisieren. Das „TimeUpdate“ -Event ist für diesen Zweck besonders wichtig und löst durchschnittlich 3-5-mal pro Sekunde aus. Dieser Ansatz ermöglicht die Erstellung von zugänglichen Audiobeschreibungen, ohne dass dedizierte Software oder separate Versionen von Videos erforderlich sind.

Ein kürzlicher Kunde hat mich gebeten, einen zugänglichen Videoplayer zu erstellen, und sie wollte wirklich, dass eine der Funktionen Audiobeschreibung ist. Audiobeschreibungen richten sich an Blinde oder Menschen mit Sehbehinderung und liefern zusätzliche Sprachinformationen, um wichtige visuelle Details zu beschreiben. Traditionell müssen Videos mit Audiobeschreibungen speziell gemacht werden, und das Audio wird in einem separaten Track einer einzelnen Videodatei codiert. Dies erfordert ziemlich professionelle Videobearbeitungsgeräte, um diese Audio -Tracks zu codieren, was es den meisten Inhaltserstellern schwer macht, zu erreichen. Das sehe ich online mit Audiobeschreibungen. Zum Beispiel bietet BBC iPlayer einige solche Inhalte an, aber der Video-Player kann das relative Volumen nicht kontrollieren und kann die Audiobeschreibung nicht ausschalten. Sie können nur individuelle oder nicht deeskriptische Versionen der Show ansehen. HTML5 Debüt

HTML5 -Videospezifikation liefert audioTracks Objekte, wodurch die Schaltflächen von Schalter und die separaten Steuersatze und Videovolumina gesteuert werden können. Sein Browserunterstützung ist jedoch kaum vorhanden - zum Zeitpunkt des Schreibens unterstützt nur IE10 diese Funktion. Wie auch immer, meine Kunden wollen eine Audiobeschreibung in einer separaten Datei, die dem Video hinzugefügt werden kann, ohne eine separate Version zu erstellen und ohne dedizierte Software einfach zu verwenden. Natürlich muss es in einigen Browsern laufen. Meine nächste Idee ist es also, MediaController, eine Funktion von HTML5 -Audio und Video, zu verwenden, mit der Sie mehrere Quellen synchronisieren können. Die Browser -Unterstützung für sie ist jedoch gleichermaßen schlank - zum Zeitpunkt des Schreibens unterstützt nur Chrome diese Funktion. Sie wissen jedoch - auch ohne diese Unterstützung ist es offensichtlich kein Problem, zwei Mediendateien gleichzeitig zu starten, sondern nur synchronisiert werden muss. Können wir dies mit vorhandenen, weit verbreiteten Funktionen erreichen? Videoereignisse

Die Video -API bietet viele Ereignisse, mit denen wir uns anschließen können, was die Audio -Wiedergabe mit Videoereignissen synchronisieren sollte:

• "abspielen" (ausgelöst, wenn Video abgespielt wird).
• "pause" (Pause "(ausgelöst, wenn das Video angehalten wird).
• "Ende" Ereignis (ausgelöst am Ende des Videos).
• "TimeUpdate" -Ervent (kontinuierlich ausgelöst, wenn das Video abgespielt wird).

Das Ereignis "TimeUpdate" ist sehr kritisch. Die Frequenz, die sie auslöst, wird nicht angegeben und variiert tatsächlich stark - aber als grober Gesamtdurchschnitt entspricht sie 3-5 -mal pro Sekunde, was für unsere Zwecke ausreicht. Ich habe ähnliche Möglichkeiten gesehen, zwei Videodateien zu synchronisieren, aber dies ist nicht besonders erfolgreich, da selbst kleine Unterschiede offensichtlich sind. Audiobeschreibungen müssen jedoch normalerweise nicht so genau synchronisiert werden - in beiden Fällen ist eine Verzögerung von 100 Millisekunden akzeptabel - und das Abspielen von Audiodateien ist im Browser viel weniger belastet. Daher müssen wir nur vorhandene Videoereignisse verwenden, um die Audio- und Video -Wiedergabe zusammen zu sperren:

• Audio abspielen, während das Video abgespielt wird.
• Pausieren Sie das Audio, wenn das Video angehalten wird.
• am Ende des Videos gleichzeitig das Video und das Audio innehalten.
• Wenn die Zeit aktualisiert wird, wird die Audiozeit so eingestellt, dass die Audiozeit von der Videozeit unterschiedlich ist.

Nach einigen Experimenten fand ich, dass die besten Ergebnisse erzielt werden können, indem die Zeit in Sekunden verglichen wird, wie unten gezeigt:

<code class="language-javascript">if(Math.ceil(audio.currentTime) != Math.ceil(video.currentTime)) {
  audio.currentTime = video.currentTime;
}</code>

Dies scheint kontraintuitiv zu sein, und zunächst dachte ich, wir brauchten die genauen Daten, die wir konnten, aber es scheint nicht der Fall zu sein. Durch Testen mit einer Text -Audio -Kopie des Video -Tracks (d. H. Sowohl der Audio als auch das Video erzeugen den gleichen Sound), ist es leicht zu hören, dass die Synchronisation gut oder schlecht ist. Basierend auf dieser Grundlage stellte ich fest, dass die Rundungszahlen bessere Synchronisationsergebnisse als nicht runding werden. Das ist also das endgültige Skript. Wenn der Browser MediaController unterstützt, müssen wir ihn nur verwenden. Andernfalls werden wir eine manuelle Synchronisation implementieren, wie unten beschrieben:

<code class="language-javascript">var video = document.getElementById('video');
var audio = document.getElementById('audio');

if(typeof(window.MediaController) === 'function') {
  var controller = new MediaController();
  video.controller = controller;
  audio.controller = controller;
} else {
  controller = null;
}

video.volume = 0.8;
audio.volume = 1;

video.addEventListener('play', function() {
  if(!controller && audio.paused) {
    audio.play();
  }
}, false);

video.addEventListener('pause', function() {
  if(!controller && !audio.paused) {
    audio.pause();
  }
}, false);

video.addEventListener('ended', function() {
  if(controller) {
    controller.pause();
  } else {
    video.pause();
    audio.pause();
  }
}, false);

video.addEventListener('timeupdate', function() {
  if(!controller && audio.readyState >= 4) {
    if(Math.ceil(audio.currentTime) != Math.ceil(video.currentTime)) {
      audio.currentTime = video.currentTime;
    }
  }
}, false);</code>

bitte beachten MediaController

Wenn wir dies tun, funktioniert es in Chrome ohne JavaScript. Es wird Medienquellen synchronisieren, aber der Benutzer kann das Audio nicht steuern (einschließlich nicht in der Lage, es auszuschalten), da der Browser

<code class="language-html"><video mediagroup="foo"></video> ... <audio mediagroup="foo"> ... </audio></code>

nicht weiß, was das Audio darstellt. In diesem Fall ist es am besten, das Audio in das Video zu codieren, da es dann im

-Objekt angezeigt werden kann, das der Browser erkennen und in der Lage sein kann, native Steuerelemente bereitzustellen. Da wir jedoch keine Daten haben, ist dies eine irrelevante Frage! Wenn das Skript also nicht verfügbar ist, wird das Audio überhaupt nicht gespielt. Dies ist die letzte Demo, die in jeder neuesten Version von Opera, Firefox, Chrome, Safari oder IE9 oder später ausgeführt werden kann: - Audiobeschreibung Demo

Dies ist natürlich nur ein einfacher Beweis für die Konzeptdemonstration - es gibt keine anfängliche funktionale Erkennung, sondern nur die grundlegenden Steuerelemente, die von der nativen Eigenschaft "Kontrollen" bereitgestellt werden. Für die richtige Implementierung müssen benutzerdefinierte Steuerelemente (unter anderem) eine Taste zum Wechseln von Audio und einem separaten Lautstärkeregler bereitstellen. Die Schnittstelle sollte auch über die Tastatur zugänglich sein, was bei den nativen Steuerelementen einiger Browser nicht der Fall ist. Es muss auch die Pufferung korrekt verarbeiten - wenn Sie nach dem Punkt suchen, an dem das Video vorinstalliert ist, wird das Audio weiterhin frei abgespielt, bis das Video genug lädt, um es neu zu synchronisieren. Ich möchte auch erwähnen, dass die Beschreibung selbst fast nicht den professionellen Standards entspricht! Dort können Sie mich mit Audacity hören, aufnehmen und konvertieren. Aber das ist es, ich denke, es zeigt effektiv, wie niedrig die technischen Hindernisse dieses Ansatzes sind. Ich muss das Video nicht bearbeiten und das Audio in einer Stunde mit kostenloser Software gemacht. Als Proof of Concept ist es sehr erfolgreich - ich glaube, meine Kunden werden sehr zufrieden sein! FAQs (FAQs) für zugängliche Audiobeschreibungen für HTML5 -Videos

Was ist die Bedeutung des Zugriffs auf Audiobeschreibungen in HTML5 -Videos?

zugängliche Audiobeschreibungen spielen eine entscheidende Rolle bei der Integration von HTML5-Videos integrativer und benutzerfreundlicher. Sie bieten auditive Äquivalente visueller Informationen an, was für sehbehinderte Benutzer besonders vorteilhaft ist. Diese Beschreibungen beschreiben wichtige visuelle Details, die von der Hauptspur nicht verstanden werden können. Durch das Hinzufügen von zugänglichen Audiobeschreibungen können Inhaltsersteller sicherstellen, dass auf ihre Videos von einem breiteren Publikum zugegriffen werden kann, wodurch die digitale Einbeziehung fördert.

Wie füge ich meinem HTML5 -Video Audiobeschreibung hinzu?

Hinzufügen von Audiobeschreibung zu HTML5 -Video enthält mehrere Schritte. Zunächst müssen Sie einen separaten Audio -Track erstellen, der die visuellen Elemente des Videos beschreibt. Dies kann mit verschiedenen Audiobearbeitungssoftware erfolgen. Sobald der Audio -Beschreibungstrack fertig ist, können Sie ihn Ihrem HTML5 -Video mit dem Element mit dem auf "Beschreibungen" festgelegten Attribut hinzufügen. Dadurch wird sichergestellt, dass der Audio -Beschreibungstrack mit dem Video erkannt und gespielt wird.

Warum kann mein HTML5 -Video nicht abspielen?

Es kann mehrere Gründe geben, warum Ihr HTML5 -Video nicht abspielen kann. Dies kann auf Probleme mit der Videodatei selbst zurückzuführen sein, z. B. nicht kodiert kodiert. Dies kann auch auf das Problem zurückzuführen sein, dass der Webbrowser oder der Videoplayer das Video -Format nicht unterstützt. Um Fehler zu beheben, spielen Sie Videos auf verschiedenen Browsern oder auf verschiedenen Geräten ab. Wenn das Problem bestehen bleibt, müssen Sie möglicherweise die Videodatei überprüfen und sicherstellen, dass das Format von HTML5 unterstützt wird.

Welche häufig verwendeten Formate werden in HTML5 -Videos unterstützt?

HTML5 -Video unterstützt mehrere gemeinsame Videoformate, darunter MP4, Webm und OGG. Das MP4 -Format wird in allen wichtigen Browsern und Geräten häufig unterstützt, was es zu einer beliebten Wahl für Online -Videos macht. Webm und OGG sind Open -Source -Formate und werden weit verbreitet, obwohl sie in allen Browsern möglicherweise nicht ordnungsgemäß funktionieren.

Wie kann ich den Fehler "HTML5 -Videodatei nicht gefunden" beheben?

"HTML5 -Videodatei nicht gefunden" Fehler "Auftritt" tritt normalerweise auf, wenn der Browser die im Quellattribut des <video></video> -Elements angegebene Videodatei nicht ermittelt. Um diesen Fehler zu beheben, stellen Sie sicher, dass der Dateipfad in der Quelleigenschaft korrekt ist und dass sich die Videodatei im angegebenen Pfad befindet. Wenn der Dateipfad korrekt ist, überprüfen Sie, ob sich die Videodatei in HTML5 und das vom Browser unterstützte Format befindet.

Wie reagiert mein HTML5 -Video?

Um Ihr HTML5 -Video reaktionsschnell zu machen, können Sie CSS verwenden, um die Breite des Videos auf 100% und die Höhe auf Auto zu setzen. Dadurch wird sichergestellt, dass das Video nach oben oder unten skaliert wird, um die Breite seines Containers anzupassen, sodass es auf verschiedene Bildschirmgrößen reagiert.

Kann ich meinem HTML5 -Video Untertitel oder Erzählung hinzufügen?

Ja, Sie können Ihrem HTML5 -Video Untertitel oder Erzählungen mit einem Element mit einem auf "Bildunterschriften" oder "Untertiteln" eingestellten Element hinzufügen. Sie müssen eine WebVTT -Datei mit Untertiteln oder Erzählungen erstellen und diese Datei dann im SRC -Attribut des Elements verweisen.

Wie kann ich die Wiedergabe meiner HTML5 -Videos kontrollieren?

HTML5 bietet mehrere integrierte Video-Wiedergabesteuerelemente, darunter Spielen, Pause, Lautstärke und Vollbildmodus. Diese Steuerelemente können aktiviert werden, indem das Attribut für Steuerelemente zum <video></video> -Element hinzugefügt wird. Darüber hinaus können Sie JavaScript verwenden, um benutzerdefinierte Steuerelemente und Interaktionen zu erstellen.

Kann ich HTML5 -Videos auf meine Website einbetten?

Ja, Sie können das <video></video> -Element verwenden, um HTML5 -Videos auf Ihre Website einzubetten. Sie müssen das SRC -Attribut verwenden, um die Quelle der Videodatei anzugeben, und können auch optionale Attribute wie Steuerelemente, Autoplay und Loop hinzufügen, um die Video -Wiedergabe anzupassen.

Was sind die Vorteile der Verwendung von HTML5 für die Video -Wiedergabe?

HTML5 bietet viele Vorteile für die Video -Wiedergabe. Es unterstützt mehrere Videoformate, bietet integrierte Video-Wiedergabesteuerungen und ermöglicht die Hinzufügung von Zugangsfunktionen wie Untertiteln und Audiobeschreibungen. Darüber hinaus können HTML5 -Videos reagieren und sicherstellen, dass sie auf allen Geräten und Bildschirmgrößen großartig aussehen. Da HTML5 der Webstandard ist, wird er schließlich von allen modernen Webbrowsern ohne zusätzliche Plug-Ins oder Software unterstützt.

Das obige ist der detaillierte Inhalt vonZugrunde nach Audiobeschreibungen für HTML5 -Video. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!