HTML5-Video IE9 im Vergleich zum Rest

Question

Sie können die Testseite here anzeigen.

Ich benutze die Lösung SO here.

Ich benutze auch die Modernizr Javascript Lib wie in der notierten Posting.

Das Problem ist das: Die Seite lädt gut und ich kann den Videoclip zum Abspielen über das Dropdown-Menü in Crome, FireFox und Safari ändern. Aber aus irgendeinem Grund in IE9, obwohl das Video wie ausgewählt wechselt, wenn das vorherige Video ausgeführt wurde, wird das neue Video in einem angehaltenen Zustand geladen, d. H. Anstatt den "Play" -Knopf zu haben, zeigt es den "Pause" -Knopfzustand an.

hier ist mein Code: HTML:

<video id="vidScreen" width="624" height="260" preload="auto" controls="controls"></video> 

Javascript. (Für die ersten Videoclip Last)

Funktion doMetaphorsInitialise() { window.document.getElementById ("metaphorsStyle") deaktiviert = falsch;

var targetMovie = window.document.getElementById("vidScreen"); 

targetMovie.volume = 1; 

if (Modernizr.video && Modernizr.video.h264) 
{ 
    targetMovie.setAttribute("src", "inception/inception.mp4"); 
} 
else if (Modernizr.video && Modernizr.video.ogg) 
{ 
    targetMovie.setAttribute("src", "inception/inception.ogg"); 
} 
else if (Modernizr.video && Modernizr.video.webm) 
{ 
    targetMovie.setAttribute("src", "inception/inception.webm"); 
} 
document.forms["metaphorsMenu"].reset(); 
} 

Javascript: (Für canges in der Drop-Down-Menü:

function doMetaphors() 

{ 

var v = new Array(); 

v["what"] = [ 
     "what/what.mp4", 
     "what/what.ogg", 
     "what/what.webm" 
     ]; 
v["bullet"] = [ 
     "bullet/bullet.mp4", 
     "bullet/bullet.ogg", 
     "bullet/bullet.webm" 
     ]; 
v["seven"] = [ 
     "seven/seven.mp4", 
     "seven/seven.ogg", 
     "seven/seven.webm" 
     ]; 

v["anderson"] = [ 
     "anderson/anderson.mp4", 
     "anderson/anderson.ogg", 
     "anderson/anderson.webm" 
     ]; 

v["smith"] = [ 
     "videos/video3.webmvp8.mp4", 
     "videos/video3.theora.ogg", 
     "videos/video3.mp4video.webm" 
     ]; 

v["everything"] = [ 
     "everything/everything.mp4", 
     "everything/everything.ogg", 
     "everything/everything.webm" 
     ]; 


var menuID = window.document.getElementById("metaphorsStyle"); 

var getDestination = menuID[menuID.selectedIndex].value; 

var targetMovie = window.document.getElementById("vidScreen"); 

if (Modernizr.video && Modernizr.video.h264) 
{ 
    targetMovie.setAttribute("src", v[getDestination][0]); 
} 
else if (Modernizr.video && Modernizr.video.ogg) 
{ 
    targetMovie.setAttribute("src", v[getDestination][1]); 
} 
else if (Modernizr.video && Modernizr.video.webm) 
{ 
    targetMovie.setAttribute("src", v[getDestination][2]); 
} 

//targetMovie.load(); 
} 

bemerkte ich aus dem targetMovie.load(); ist es nicht notwendig zu sein scheint, aber auch mit, dass es nicht funktioniert

ich auch in Betracht gezogen haben.

So

targetMovie.addEventListener('loadeddata', initialiseControls, false); 

in initialiseControls ich das Stück/pa wechseln könnte Verwenden Sie den Knopf, aber haben keine Informationen im Internet gefunden.

Ich hoffe, meine Abfrage ist klar und nicht zu lang.

Würde wirklich etwas Hilfe zu diesem Thema lieben.

Vielen Dank.

NEWS: Ich habe jetzt alle Optionen im Dropdown-Menü funktional, so dass Sie jedes Element auswählen können und Zeuge des Verhaltens, das ich versuche, in IE9 zu korrigieren. Danke nochmal.

Answer 1

Es gibt ein Attribut, mit dem Sie überprüfen können, ob der Player pausiert ist oder nicht. Es ist immer besser, die Steuerelemente vom Player zu aktualisieren. In meinem Fall würde ich mir die "geladenen Daten" anhören und danach den Videoplayer-Status überprüfen und die Steuerelemente aktualisieren. also versuchen:

//loadeddata = (new) video-source loaded 
targetMovie.addEventListener('loadeddata', function(){  

    if(targetMovie.paused){ //get videoplayer state (true | false) 
     showPlayButtonAndHidePauseButton(); 
    } 
    else 
    { 
     hidePlayButtonAndShowPauseButton(); 
    } 
}); 

hoffe es funktioniert. BTW: Hier ist eine gute Live-Demo für alle Ereignisse/Attribute von HTML5 Video-Element: http://www.w3.org/2010/05/video/mediaevents.html