jQuery - 2 Videos switchen - im IE8

[Trash]

Hallo,
ich habe in meiner Webpage derzeit ein Video integriert und per Button soll dieses Video durch ein anderes ausgetauscht werden. Funktioniert auch einwandfrei - außer im IE8.

Hier kommt ersteinmal der Code. Ihr seht dort das Video und darunter 2 divs, die nicht angezeigt werden, dem jQuery Skript aber helfen zu ermitteln welche Video gerade "aktuell" ist und durch welches ersetzt werden soll.

HTML:

<video id="video" controls="controls" loop="loop">
<source src="inc/1.mp4" type="video/mp4">
<source src="inc/1.webm" type="video/webm">               
</video>

<div class="video-active" movie="one">Active Video</div>
<div class="video-active-name" movie="1.mp4">Active Video Name</div>
<img class="section-video-button" src="img/btn.png" alt="btn" />

JS:

$(function() {
    $(".section-video-button").on("click", function() {
        $("video").trigger("pause");
        if ($('.video-active').attr('movie') == 'one') {
            $('#video').replaceWith('<video id="video" controls="controls" loop="loop"><source src="inc/2.mp4" type="video/mp4"><source src="inc/2.webm" type="video/webm"></video>');
           $('.video-active').attr('movie','two');
            $('.video-active-name').attr('movie','2.mp4');
        } else {
            $('#video').replaceWith('<video id="video" controls="controls" loop="loop"><source src="inc/1.mp4" type="video/mp4"><source src="inc/1.webm" type="video/webm"></video>');
            $('.video-active').attr('movie','one');
            $('.video-active-name').attr('movie','1.mp4');
        }
        $("video").trigger("play");
    });
 });

Um überhaupt ein Video im IE8 abspielen zu können benutze ich diesen bypass mit dem swfobject. Das funktioniert auch 1a. Allerdings ist es so, sobald ich oben auf den Knopf zum "switchen" drücken, spielt er im IE8 das neue Video nicht. Ich vermute das es am $(document).ready(function() { liegt, habe den untigen Code ohne $(document) aber auch oben nach oben hinter $("video").trigger("play"); kopiert, was keine Änderung bringt.


IE8 video bypass:

  $(document).ready(function() {

    var v = document.createElement("video");
    if ( !v.play ) {
        var h264 = $('.video-active-name').attr('movie');
        var folder ="inc/";

        var flashvars = {autoplay:true,loop:true,controls:true,src:escape(folder+h264)};
        var params = {allowFullScreen:false,wmode:"opaque"};
        var attributes = {bgcolor:"#000000"};

        swfobject.embedSWF("flashfox.swf", "video", "640", "360", "9.0.0","", flashvars, params, attributes);
        }
  });

Habt ihr eine Idee, wie das "neue" Video auch im IE8 abgespielt wird?

Danke!

 

[Jan-Frederik Stieler]

Hi,
vielleicht funktioniert es schon wenn du anstatt $(document).ready() $(window).load() nimmst.
Den Flash benötigt ja das swf um zu funktionieren und da reicht es vielleicht nicht aus wenn nur die DOM vorhanden ist.

Grüße

 

[Parantatatam]

Ich würde dir außerdem empfehlen, dass du dein Attribut "movie" in "data-movie" umbenennst, damit es HTML5-konform ist.