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:

if(Math.ceil(audio.currentTime) != Math.ceil(video.currentTime)) {
  audio.currentTime = video.currentTime;
}

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:

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);

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

<video mediagroup="foo"></video> ... <audio mediagroup="foo"> ... </audio>

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!