HTML5 Video currentTime not updating in Chrome

Question

In Chrome, for some reason in a page, if I set currentTime for <video id="player" preload="metadata" playsinline> tag, it is not updating. For example, if I set document.getElementById('player').currentTime = 5 , it is not updating. It starts playing from 0.

I added the same code in another page but it is working fine without any issues in Chrome. And in Firefox, both the pages are working fine.

FYI, I am trying to seek the video using custom video controls and setting the current time. Only in this case, it fails to work.

I don't know what is happening. Any advice please.

Answer 1

You should load your video and only after that set .currentTime.

Try this:

let player = document.getElementById('player');
preload(player, 5);
function preload(elem, time){
 elem.setAttribute('preload', 'auto');
 elem.addEventListener('canplaythrough', setCurrentTime);
 function setCurrentTime(){
 elem.currentTime  = time;
 elem.setAttribute('preload','none');
 elem.removeEventListener('canplaythrough', setCurrentTime);
 }
}