How to set initial time for HLS (m3u8) in Video.js on Chrome, Android

Question

I am trying to start playing HLS video from certain time after page loads. On most browsers this approach works well:

var player = videojs("video");
player.on('canplaythrough', setInitialTime());

function setInitialTime() {
  player.currentTime(300);
}

CodePen example

However on Chrome for Android video always starts from 0 sec.

I have tried to trigger event on play instead of canplaythrough but this is not ideal solution since the user has to wait for preload after clicking play button.

Tested on Android 11, Chrome 89.0.4389

Answer 1

The video is being played with Android's native HLS support, which can be a problem as Android's HLS support is pretty buggy, and the event might be firing before you have a chance to set a listener.

First, update Video.js. 5.x is very old now. Latest is 7.11.8. At the same time remove videojs-contrib-hls which is obsolete. Older versions defaulted to use the browser's HLS support if available, newer versions use Video.js's HTTP streaming in preference to the browser (except Safari).

Secondly, even with an up to date Video.js, if the video element has already loaded the HLS video when the player is initialised then it wont reload the source again. To avoid this, either use a <video-js> element instead of <video>, or remove the source element and load with player.src({src: 'https...', type: 'application/x-mpegURL'}).