HTML5 Video IE9 vs. The Rest

Question

You can view the test page here.

I a using the solution SO here.

I am also using the Modernizr javascript lib as directed in the noted posting.

The problem is this: the page loads fine and I can change the video clip to play using the drop-down menu in Crome, FireFox and Safari. But for some reason in IE9 although the video changes as selected if the previous video was running the new video loads in a paused state i.e. instead of having the 'play' button, it shows the 'pause' button state.

here is my code: HTML:

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

Javascript: (for initial video clip load)

function doMetaphorsInitialise() { window.document.getElementById("metaphorsStyle").disabled = false;

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: (For canges in the drop-down menu:

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();
}

I commented out the targetMovie.load(); is it does not seem to be necessary but even with that it is not working.

I have also considered:

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

So in initialiseControls I could toggle the play/pause button but have not found any info on the web.

Hope my query is clear and not too long.

Would really love some help on this.

Thank you very much.

NEWS: I have now made all the options in the drop-down menu functional so you may choose any item and witness the behaviour I am trying to correct in IE9. Thank you again.

score 1 · Answer 1 · answered Mar 26 '12 at 14:50

1

there s an attribute where you can check if the player is paused or not. it s always better to update controls from the player. in your case i would listen to the 'loadeddata' and afterwards check the videoplayer-state and update the controls. so try:

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

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

hope it works. btw: here s a good live demo for all events/attributes of html5 video element: http://www.w3.org/2010/05/video/mediaevents.html

answered Mar 26 '12 at 14:50

longi

11,104
10
55
89

i tried it and it says: showPlayButtonAndHidePauseButton(); is not a function. am I missing something? – iTEgg Mar 26 '12 at 15:03
http://www.w3.org/2010/05/video/mediaevents.html <- displays the same problem that I mentioned! :( – iTEgg Mar 26 '12 at 15:07
1

to comment#1: with the "showPlayButtonAndHidePauseButton()" i meant, this is the place where YOUR logic should be written. so replace the function with the way you update your controls, f.e. myPauseButton.hide(); myPlayButton.show() tcomment#2: what should is say expect of ie.... still the workaround should work – longi Mar 26 '12 at 15:38
Yes that is what I understood beforehand. I want to start with the default player provided by the browser. is there a way to access the play/pause button within the default player interface? – iTEgg Mar 26 '12 at 15:43
ah sorry, thought you have implemented your own controls..well, this is definetly an ie bug! in that case you could (still in the loadeddata method) call targetMovie.play();targetMovie.pause(); this starts and stops the player and the controls should update – longi Mar 26 '12 at 16:08
it is just so weird that such a bug would ever exist! At the same time I have not come across any documents that mentions this as a bug either. Well thanks for sharing your ideas. – iTEgg Mar 26 '12 at 16:15
new one for me too, but still html5 isn t finalized yet. guess it ll be fixed in some future versions.. – longi Mar 26 '12 at 16:20
than i ve got a good start for you:http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/ good luck – longi Mar 26 '12 at 20:11

HTML5 Video IE9 vs. The Rest

1 Answers1