Unable To Change Source Of Video Tag Via Javascript On Ie9

Hi I am working on HTML5 Video Player, Currently i am experiencing a wierd error. I am able to play the video fine in IE and Chrome fine, however, when i dynamically want to change

Solution 1:

Remove the complete video html element and create a new one instead of just replacing one of its attributes.

Solution 2:

in contrast to TweeZz I advice against removing the entire video-element as this breaks the code on iOS (and Android).

instead do not put the source elements in your html but instead add them via JS. IE9 does not allow this which again you can catch and then edit the src-attribute of the video element itself, as I showed here: Video tag not working in IE 9

as a shortcut, here the code I posted there:

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

Background: when you set source-elements in your html, IE9 prioritizes this information. Later, when you use the .src() function only the src-attribute of the video-element will be overwritten but due to IE9's prioritization of the source-element this won't matter.

--> definitely a bug in IE9

UPDATE: please check this post for a better solution:Video tag not working in IE 9

Solution 3:

FYI: you can make this work by not using the <source> elements and instead using the src attribute: <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>

Just becomes <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>

Solution 4:

Not sure if this was causing your problem but do you not need the closing </video> tag? I know that some closing tags can be omited in HTML5, but I didn't think video was one and it would probably cause issues with the javascript.

Solution 5:

I agree with Berkefeld's advice against replacing the whole video element, BUT there is a better solution to this problem than creating the video element and appending videos via javascript as suggested.

I faced the same exact problem here and after a lot (and I mean a lot) of trial and error, I found the real solution and posted it on that page. Internet Explorer was a nightmare when dealing with changing videos via HTML5 video tags, but this solves it.