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

Answer 1

You have to wait until it's ready to play,
i.e. don't expect play to be a blocking function
Change your code as follows:

myVid.play();
myVid.media.addEventListener('playing', function(){
    myVid.setCurrentTime(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;
  }
}

Answer 3

video = document.getElementById('video');
begin_play  = 50;
play_video_first = true; //if you want to run only first time    
video.addEventListener("play", capture, false);

function capture(event) 
{
     if (event.type == "play"){
         if(play_video_first){
             play_video_first = false;
             video.currentTime = begin_play;
          }
     }
}

Answer 4

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