Reputation: 55
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.
Upvotes: 0
Views: 1273
Reputation: 3461
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/
Upvotes: 1
Reputation: 14786
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);
Upvotes: 2