Ich habe Probleme, ein funktionierendes Beispiel zu erhalten, das Metadaten aus einer WebVTT-Datei liest, die durch das <track> -Element eines <video> auf einer HTML5-Seite angegeben wurde. Um es klar zu sagen, ich spreche nicht über das Lesen der Metadaten aus der Videodatei selbst (wie zum Beispiel mit einem MPEG-Transport-Stream). Worüber ich spreche, ist das <track> -Element, das für die Untertitelung von Videos verwendet wird. Eines der Attribute von <track> ist kind , das als einer der folgenden Werte angegeben werden kann:
Ich versuche, den Metadaten -Typ zu verwenden, um auf Text zuzugreifen, der in der entsprechenden WebVTT-Datei gespeichert ist, die ich mit JavaScript bearbeiten möchte. Ich weiß, dass dies möglich ist, da es von Silvia Pfeiffer und von vom Hersteller von Captionator , welches das JavaScript-Polyfill ist, das ich zur Implementierung verwende die Funktionalität der Interpretation der <track> -Tags. Allerdings kann ich es einfach nicht zum Laufen bringen.
Mein Code basiert auf dem Beispiel der Captionator Dokumentation. Ich habe eine Schaltfläche hinzugefügt, um die Metadaten abzurufen und sie anzuzeigen, wenn ich auf die Schaltfläche klicke. Leider zeigt es "undefined" anstatt der Metadaten an. Irgendwelche Ideen, was ich falsch machen könnte? Oder weiß jemand, wo ein Arbeitsbeispiel ist, das ich mir ansehen könnte? Ich kann nirgendwo einen finden.
Wenn Sie sich meinen Code ansehen möchten, habe ich ihn unten eingefügt:
%Vor%Meine WebVTT-Datei sieht folgendermaßen aus:
%Vor% Die Art, wie Sie auf die Stimmung zugreifen, ist korrekt - es gibt dort keine Probleme (obwohl sich Captionator 0.6 von der .tracks -Eigenschaft zur .textTracks -Eigenschaft ändert, um mehr mit der Spezifikation übereinzustimmen. Wenn Sie kann den gelegentlichen Fehler tragen, den ich empfehle, 0.6 für seine größere Standardcompliance zu verwenden - ich habe den folgenden Code geschrieben, um .textTracks zu verwenden - ersetzen Sie für .tracks , wenn Sie den stable Zweig weiter verwenden möchten.)
Das Problem bezieht sich auf das Laden der Textspuren selbst. Im Moment sagst du Captionator nicht, dass er den Track laden soll . Da dies asynchron geschieht und auf Anfrage die unvermeidliche Verzögerung auftritt, bei der der Inhalt nicht verfügbar ist, müssen Sie Ihren Code so schreiben, dass Ladezeit und potenzieller Ladefehler berücksichtigt werden.
Sie warten auch nicht darauf, dass Captionator selbst geladen wird - möglicherweise könnte ein Benutzer unwissentlich auf die Schaltfläche klicken, bevor dies geschehen ist - und einen fiesen JavaScript-Fehler auslösen. Das wird nicht so ein Problem sein, wenn Sie auf Ihrer lokalen Box testen, aber sobald Sie im Internet bereitstellen, werden Sie alle möglichen Rennbedingungen und andere Missgeschicke sehen. Ziehen Sie in Betracht, die Schaltfläche zu deaktivieren, bis sowohl die Seite als auch die Beschriftungsdaten geladen sind.
Ich habe versucht, die Captionator-API so nahe wie möglich an die tatsächliche JS-API zu bringen, die sehr bald in Browsern landen wird - also wird es in Zukunft genauso funktionieren, wie Sie mit der nativen Browserfunktionalität interagieren. Sobald die Funktionalität nativ verfügbar ist, wird Captionator aus dem Weg geräumt, und Ihr Code sollte (vorausgesetzt, sie ändern die API nicht erneut!) Nur mit der nativen API arbeiten.
> Zuerst müssen Sie tatsächlich verlangen, dass Captionator den Inhalt lädt. Dies geschieht, indem ich den "Anzeigemodus" der Spur auf SHOWING oder 2 setze.
Alternativ können Sie den Status einer Spur HIDDEN ( 1 ) zuweisen - was immer noch einen Ladevorgang auslöst, und CueChange-Ereignisse werden weiterhin ausgelöst - aber keine Cues auf dem Bildschirm anzeigen. In Captionator male ich keine Metadaten-Tracks für den Bildschirm, aber die (fehlerhafte) WebKit-API wird in der Entwicklung sein.
Dann müssen Sie darauf achten, wann die Cues geladen und verfügbar sind:
%Vor%Oder wenn etwas schief geht:
%Vor% Sobald der Inhalt geladen ist, können Sie auf das TextTrack.cues -Array zugreifen (naja, technisch ein TextTrackCueList .) Vor dem Laden ist die TextTrack.cues -Eigenschaft null .
Beachten Sie, dass Captionator den Cue-Text jeder Stimmung analysiert, außer wenn die Track-Art metadata ist - also stellen Sie sicher, dass Sie die richtige Track-Art zuweisen. Sie könnten mit Daten oder Tags enden, die Captionator für ungültig erklärt. Sie können diese Option auch für reguläre Cues deaktivieren, indem Sie die Option processCueHTML auf false setzen.
In diesem Sinne würde ich Ihren Code folgendermaßen umschreiben:
%Vor%Hier deaktivieren wir die Schaltfläche und verhindern, dass Benutzer bei langsamen Verbindungen (oder nur mit sehr schnellen Reflexen!) sie treffen, bevor entweder Captionator oder die Metadatenspur bereit sind und ein Load-Ereignis abgehört wird - zu diesem Zeitpunkt Wir aktivieren die Schaltfläche erneut und können den Cue-Text wie gewohnt abrufen.
Sie müssen möglicherweise Ihre Metadaten-VTT-Datei über Ajax laden und analysieren und selbst anzeigen.
Ich habe mir das Beispiel vom HTML5 Ärzte Artikel über Video-Untertitelung . Sie verwenden Playr , also habe ich den Quellcode ausgecheckt, und sie fordern definitiv die VTT-Datei asynchron und Parsen des Inhalts nach dem Laden.
Ich konnte den Inhalt der VTT-Datei laden und mit folgendem Code in das angegebene Element ablegen:
%Vor% Ich bin mit Captionator nicht vertraut, aber es sieht so aus, als hätte es einige Möglichkeiten, VTT-Dateien in einer Art von Datenstruktur zu analysieren, auch wenn es nicht unbedingt den Track-Typ metadata unterstützt. Vielleicht können Sie eine Kombination aus diesem Code und dem vorhandenen VTT-Parser des Captionators verwenden?
Tags und Links javascript html5 video html5-video accessibility