Unable to change source of video tag via JavaScript on IE9

Question

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 the video source via java script, i ran into troubles. Chrome change the video source without any problem however IE9 keep the previous video intect and just does not change. Safari also works fine.

I did try to search in stackoverflow and found quite a few same questions and tried almost every answer but it seems IE has its own style of working or i am missing something. Just to be sure i switch the files in order to verify both videos are working in IE9 and both do, however they just dont play when i try to manipulate them via javascript. a sample code is below

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

while javascript is as simple

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

Answer 1

删除完整的视频html元素并创建一个新元素，而不是仅替换其中一个属性。

Answer 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

Answer 3

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.

Answer 4

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.

Answer 5

Had the same issue as the OP only with IE11. The error "Invalid Source" would crop up even when simply executing video.load() without even changing the video.src. My issue turned out that it was also related to the server ( IIS 7.5).

Switched to a newer server (Windows Server 2012 R2 w/ IIS 8.5) and the problems disappeared!

Answer 6

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