Nicht ändern der Quelle der video-tag per JavaScript im IE9

Hallo, ich arbeite auf HTML5-Video-Player, die Derzeit erlebe ich eine seltsame Fehler. Ich bin in der Lage, um das video abzuspielen Prima im IE und Chrome Prima, aber wenn ich dynamisch ändern wollen, die video-Quelle über java-script, lief ich in Schwierigkeiten. Chrome ändern Sie die video-Quelle ohne problem, jedoch IE9 halten Sie den letzten video intect und einfach nicht ändern. Safari funktioniert auch einwandfrei.

Ich habe versucht zu suchen in stackoverflow und fand eine ganze Reihe von gleichen Fragen und versucht fast jeder Antworten, aber es scheint der IE hat seine eigene Art zu arbeiten, oder bin ich etwas fehlt.
Nur um sicher zu gehen, wechsle ich die Dateien, um zu überprüfen, beide videos sind arbeiten in IE9 und beide tun das, aber Sie einfach nicht spielen, wenn ich versuche, Sie zu manipulieren via javascript. ein Beispiel-code ist unten

<div class="video">
     <video id="example_video_2" class="video-js" width="640" height="264" controls="controls" preload="auto" >
        <source src="song.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />             </div>                
   </div>

während javascript ist so einfach 

function myNewSrc() {

    var myVideo = document.getElementById('example_video_2');
  //myVideo.src = "";
   myVideo.src = "120235_VIDHIGH.mov";
    //alert(myVideo.src);
    myVideo.load();

    myVideo.play();
    //changeMovieSource('song.mp4','something');
    //$("#example_video_2 > source").attr("src", "120235_VIDHIGH.mov");
    //alert($("#example_video_2 > source").attr("src"));    
    }
  • Was Sie zeigen ist gebrochen HTML - Sie sind nicht schließen Sie die video tag?
  • sorry, es fehlte in kopieren und einfügen.
InformationsquelleAutor Gripsoft | 2011-05-21
  1. 6

    Entfernen Sie das komplette video-html-element und einen neuen zu erstellen anstatt nur den Austausch eines seiner Attribute.

    • yup, das funktioniert, das einzige Problem ist, es schaffen, ein bisschen von flimmern aufgrund der Entfernung und Ergänzung von video-element.
    • Vielleicht könnten Sie reduziert das flimmern, indem Sie zuerst das hinzufügen einer zweiten video-tag (display:none), entfernen Sie dann die erste und die zweite sichtbar?
    • Einbauen ist nicht eine option, auf mobile Geräte, weil, wenn Sie ersetzen ein video-element mit einem anderen Benutzer haben, klicken Sie auf den zweiten video-element zum starten-video...
    • Lief in das gleiche Problem mit IE11, in dem die änderung der <source> src mit javascript verursacht das video nicht zu spielen. Ich hatte generiert die gesamte html-Elements mit javascript.
    InformationsquelleAutor TweeZz
  2. 4

    im Gegensatz zu TweeZz ich abraten entfernen Sie die gesamte video-element, da dies bricht den code auf iOS (und Android).

    stattdessen setzen Sie nicht den source-Elemente in Ihre html -, aber stattdessen fügen Sie Sie über JS. IE9 läßt es nicht zu, die kann man auch fangen und dann Bearbeiten Sie das src-Attribut des video-Elements selbst, wie ich hier gezeigt:
    Video-tag funktioniert nicht im IE 9

    als eine Verknüpfung, hier der code, den ich gepostet dort:

    $('video').append('<source src="' + pathMp4 + '" type="video/mp4"><source src="' + pathWebm + '" type="video/webm">');
if(!$('video').children('source').length) { //set src&type attribute for ie9/android3.1 because it does not add the source child-elements
    $('video').attr('src', pathMp4 ).attr('type','video/mp4');
}

    Hintergrund: wenn Sie source-Elemente in Ihre html -, IE9, priorisiert diese Informationen. Später, wenn Sie die .src() Funktion nur das src-Attribut des video-Elements überschrieben werden, wird aber aufgrund der IE9 die Priorisierung der source-element, das nicht Materie.

    --> definitiv ein bug im IE9

    UPDATE: bitte überprüfen Sie diesen Beitrag für eine bessere Lösung: Video-tag funktioniert nicht im IE 9

    InformationsquelleAutor Jörn Berkefeld
  3. 0

    FYI: Sie können diese Arbeit machen, nicht mit der <source> Elemente und verwenden stattdessen die src Attribut:
    <video id="example_video_2" class="video-js" width="640" height="264" controls="controls" preload="auto" >
    <source src="song.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    </video>

    Wird
    <video id="example_video_2" class="video-js" width="640" height="264" controls="controls" preload="auto" src="song.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></video>

    InformationsquelleAutor John Dyer
  4. 0

    Nicht sicher, ob dies die Ursache Ihres Problems, sondern Sie nicht brauchen, die Schließung </video> tag? Ich weiß, dass einige schließende tags können weggelassen in HTML5, aber ich glaube nicht, video war und es würde wahrscheinlich dazu führen, dass Probleme mit dem javascript.

    InformationsquelleAutor Ben
  5. 0

    Ich Stimme mit Berkefeld ' s Ratschläge gegen den Austausch der gesamten video-element, ABER es ist ein bessere Lösung, um dieses problem als die Herstellung der video-element und Anhängen von videos mittels javascript vorgeschlagen.

    Stand ich exakt das gleiche problem, hier und nach eine Menge (und ich meine eine Menge) von Versuch und Irrtum, fand ich die richtige Lösung und postete es auf dieser Seite. Internet Explorer war der Horror, beim Umgang mit wechselnden videos per HTML5-video-tags, aber diese löst.

    • Repost, echte Lösungen hier bitte!
    • Ich Stimme mit mrkus-tharkun. Hatte Sie nach dem eigentlichen Lösung auch hier (wie Jörn Berkefeld) hast, würde ich gestimmt habe, bis Sie Ihre post. Aber leider ist es nie passiert.
    InformationsquelleAutor mkralla11
  6. 0

    Hatte das gleiche Problem wie OP nur mit IE11. Der Fehler "Ungültige Quelle" würde auftauchen, auch wenn Sie einfach ausführt, video.load() sogar ohne ändern der video.src. Meine Frage stellte sich heraus, dass es auch in Bezug auf die server ( IIS 7.5).

    Wechselte zu einem neueren server (Windows Server 2012 R2 w/IIS 8.5) und die Probleme sind verschwunden!

    InformationsquelleAutor BA TabNabber
Schreibe einen Kommentar