chrome video src change not working

Question

I use the following code to change a videos src attribute after video ended.

I preload the second video I change the src to link to the second video.

In IE and Firefox this works perfectly but in Chome 27.X.X the video element seems dead after changing the src.

Strange thing is... if I use a breakpoint to step through the code in my .ended function it works fine!

HTML

<video id="vid1" preload="auto" width="640" height="480" src="/Trans/video/sleigh60.mp4" controls>
</video>

<div style="display:none">
    <video id="vid2" src="/Trans/video/sleighRest.mp4" preload="auto">
    </video>
</div>

JavaScript

<script type="text/javascript">
    var vid2Source = '/Trans/video/sleighRest.mp4';
    var video = document.getElementById('vid1');

    video.addEventListener("ended", function() {
        video.src = vid2Source;
        video.load();
        video.play();
    });
</script>

THX for any help.

Answer 1

I have faced the same issue in Chrome with the following code.

My previous HTML:

<video  preload="auto" controls controlsList="nodownload" width="900">
    <source id="vidSrc"  type="video/mp4" />
</video>

My previous javascript was:

jQuery('#vidSrc').attr('src','http://techslides.com/demos/sample-videos/small.mp4');

I was updating the src attribute but video was not being loaded. So I have removed source element from video and source is being appended and it is working well.

Updated Html

<video id="vidSrc"  preload="auto" controls controlsList="nodownload" width="900">
</video>

Updated js:

jQuery('#vidSrc').html('<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4" />');