Ich lade eine Webvtt-Datei. Funktioniert gut, aber in IE11 sind keine Hinweise vorhanden.

            WEBVTT FILE

            00:00:01.000 --> 00:00:04.000
            Let's take a look at the 4th platform preview of IE10

            00:00:04.000 --> 00:00:06.000
            running on the Windows 8 Developer Preview

Im Code:

            var trackNode = jQuery("<track default>");
            // videoNode is just a <video> with <source> child
            videoNode.append(trackNode);
            trackNode.attr({
                label: "Captions",
                kind: "metadata",
                src: "localhost:1234/example&output=vtt"
            });
            trackNode.on("load", function() { // I have also tried using "loadedmetadata" instead of load, but nothing changed
                console.log(this.track.cues.length);
            });

In Chrome kann ich sehen, dass es 2 Hinweise gibt, aber in IE11 sehe ich 0

Auch nachdem alles geladen ist und ich dies in die Konsole stecke:

            jQuery("track").track.cues.length

Ich bekomme immer noch 0 im IE und 2 in Chrome

Vermisse ich etwas?

UPDATE 1:

Nach einigem Refactoring wurde dieser Fehler in der Konsole angezeigt: MEDIA12604: Textspur: Unbekannter MIME-Typ. h = 8007000b.

Und dann habe ich diesen Beitrag gefunden: HTTP-Untertitel in WinJS-Videoelement

Ich denke, dies könnte ein Serverproblem sein.

UPDATE 2:

MEDIA12604: Textspur: Unbekannter MIME-Typ. h = 8007000b. wird sortiert, aber Track-Cues werden im IE immer noch nicht geladen

5
Eugene 7 Aug. 2015 im 11:45

3 Antworten

Beste Antwort

In IE11 müssen Sie den MIME-Typ für WebVTT auf dem Server definieren. Das wäre text / vtt. Beachten Sie, dass der IE WebVTT-Funktionen wie :: cue oder Positionsmarkups immer noch nicht unterstützt. Einige Drittanbieter wie JW Player unterstützen sie in unterschiedlichem Maße.

7
Mike Kotler 3 Sept. 2015 im 22:06

Diese Frage hat bereits eine akzeptierte Antwort, aber ich hoffe, dass ich dem nächsten Entwickler etwas Zeit sparen kann.

Ich habe festgestellt, dass IE10 und IE11 das Laden von VTT-Dateien mit unterschiedlichem Ursprung für ein <track> nicht unterstützen, selbst wenn CORS aktiviert ist (Access-Control-Allow-Origin: * Antwortheader). Um IE-Unterstützung für Untertitel hinzuzufügen, musste ich ein Skript wie das folgende verwenden.

Dieses Skript lädt jede VTT-Datei über AJAX herunter und erstellt eine Blob-URL und ersetzt jeden <track> src durch seine jeweilige Blob-URL. Dies läuft nur im IE.

window.addEventListener("load", function() {
  if (window.navigator.userAgent.indexOf("MSIE ") < 0 && window.navigator.userAgent.indexOf("Trident/") < 0) {
    // Not IE, do nothing.
    return;
  }

  var tracks = document.querySelectorAll("track")

  for (var i = 0; i < tracks.length; i++) {
    loadTrackWithAjax(tracks[i]);
  }
});

function loadTrackWithAjax(track) {
  var xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200 && this.responseText) {
      // If VTT fetch succeeded, replace the src with a BLOB URL.
      var blob = new Blob([this.responseText], { type: 'text/vtt' });
      track.setAttribute("src", URL.createObjectURL(blob));
    }
  };
  xhttp.open("GET", track.src, true);
  xhttp.send();
}
<video controls preload width="600" height="337.5" autoplay crossorigin="anonymous">
      <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4"></source>
      <track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>
</video>
1
Tom Faltesek 4 Nov. 2019 im 17:34

Ich möchte hier hinzufügen, dass ich nach dem Lösen des MIME-Typproblems in IE11 immer noch den Fehlercode MEDIA12608: Timestamp should be '-->'. hr=80004004 erhalten habe. Das Update entfernte die tausendste Ziffer im Zeitstempel. Ändern Sie beispielsweise Folgendes: 00:00:00.000 --> 00:01:10.000 in 00:00:00.00 --> 00:01:10.00

0
GR Miller 3 März 2020 im 20:15