changing src and currentTime doesn't work together

Question

Well, the thing is, for my application, I have to change the video src and currentTime dynamically. I have tried changing both independently which worked fine. But, when I tried to do them together, there is some problem.

This is my video tag and a button, onclicking which src and currentTime must be changed.

<video id="video" src="sample.mp3" controls autoplay></video>
<button onclick="foobar()">change</button>

and my foobar() function is

function foobar()
{
v=document.getElementById("video");
v.src = "foo.mp3";
v.load();
v.currentTime = 3;
}

When I remove either v.src or v.currentTime, its working fine... I have tried using networkState and currentState, no luck. I have even waited for some time(javascript timers) made sure that the new mp3 file is completely loaded and then tried changing currentTime. Even that did not work.

Please help me..

PS: I don't want to use any third party libraries.

Answer 1

You have to change the currentTime when the video is ready for that. In order to do that you can listen for a event from the video and change then the property, for example the loadeddata event. You can see the full list here .

v.addEventListener('loadeddata', function(){v.currentTime = 3;}, true);

Answer 2

You may use the url to set the timer:

function foobar()
{
    v=document.getElementById("video");
    v.src = "foo.mp3#t=3";
    v.load();
}

It works in this fiddle http://jsfiddle.net/UkZLf/