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

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