I have a video in the middle of my html. As you can see at first I haven't any source
<video id="videoPrincipal" src="" width="640" height="360" controls preload></video>
When I click a button I trigger a function that makes:
myVid = document.getElementById('videoPrincipal');
myVid.src = 'video.mp4';
myVid.play();
myVid.currentTime ='5';
The video starts playing correctly but I cant set the current time (and I made the same as we can see in http://www.w3schools.com/tags/av_prop_currenttime.asp)
It gives me the same error if I set the currentTime before calling the play function.
The error that shows me in the console is the following: "Uncaught InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable." (in the currentTime line) but when i search this problem I cant associate with video, only with canvas.
Thanks in advance
You don't have to wait for it to start playing, but it does have to be ready to play. There's the canplay event to do that, so something like this should work:
myVid.play();
myVid.addEventListener('canplay', function() {
this.currentTime = 5;
});
Caution: as many commenters have correctly pointed out, "Setting currentTime triggers the canplay event so this example creates a loop." You should probably consider another event, such as loadeddata instead to avoid loops that might cause memory leaks and unintended behaviour.