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.

Do you have any kind of on load handler that runs your javascript? Your code might be running before the DOM gets fully loaded. If you put your breakpoint there on your first line, that would delay your code long enough to finish loading the DOM. — mafafu, Jun 27 '13 at 13:15
I meant putting a breakpoint inside the `addEventListener` function. Putting the whole thing inside `window.onload` does not change anything. — P Alcove, Jun 27 '13 at 13:22
Yeah, if your event listener is getting called then the DOM has to be loaded or it wouldn't be able to find the vid1 element. That was my first thought, sorry that didn't help. — mafafu, Jun 27 '13 at 13:43
Not sure why you're seeing that behavior, but here's another thought: Why not just set `display:none` on the first video in the event handler and then show the second one after that? — mafafu, Jun 27 '13 at 13:50
I thought about that too but since changing the `src` is mentioned in the HTML5-Spec as the [right thing](http://stackoverflow.com/a/8389422/2030129) to do this might save me some trouble later on mobile devices. — P Alcove, Jun 27 '13 at 14:01
In general introducing a state change on the item you are observing can leads to odd behaviors. Consider the effect if there were two subscribers to the "ended" event? A safer approach would be to let the event notifier finish, but to setup a callback to yourself, which will occur after the "ended" event has truly completed. — veritasetratio, Jun 27 '13 at 14:13
Could you give me an example of what you mean by "wait for finish"? I thought what I´m doing allready is some kind of callback? Thx. — P Alcove, Jun 30 '13 at 10:23
@P Alcove, I missed the notification on your response, but here is a fiddle using `setTimeout` to defer the "load next video" action. http://jsfiddle.net/2srXM/ — veritasetratio, Jul 15 '13 at 23:01

score 0 · Answer 1 · answered Oct 11 '17 at 08:04

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" />');

chrome video src change not working

HTML

JavaScript

1 Answers1

Linked