Issue setting currentTime in HTML5 video

Question

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

Answer 1

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;
});

Answer 2

As above mentioned, you try to set currentTime when the video is not seekable. So, as an alternative use-case (reset time to 0 when a user click on a button, for example), you can do something like:

function resetVideo() {
  myVid.pause();
   
  if (myVid.seekable.length > 0) {
    myVid.currentTime = 0;
  }
}

Alternatively, you can also trying to reset only if the video has been played before.

function resetVideo() {
  myVid.pause();
   
  if (myVid.currentTime !== 0) {
    myVid.currentTime = 0;
  }
}