3

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.

Jeff Noel
  • 7,500
  • 4
  • 40
  • 66
P Alcove
  • 155
  • 1
  • 1
  • 8
  • 1
    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

1 Answers1

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" />');
Amit Garg
  • 3,867
  • 1
  • 27
  • 37