No autoplay, a big play button in the middle instead?

[MoZyo]

What do you want to do with Hls.js?

To display a big play button in the middle with maybe a poster in the background while it hasn't been pressed yet. (All of which I don’t know how to do and don’t know if supported already) Also, this way it could buffer and have smoother start.

I would also like to ask, if this is indeed supported and doable... I have a backBufferLength of 1.5, and it is good (but needs to press back behind on the seek bar). How can I sync it to that on the first play instance of the stream?

Thank you and forgive me, very new to this.

What have you tried so far?

Was trying to figure out how to auto-play but then I I thought having a play button in the middle of the player would be better and this way it could buffer safer.

I have this as my config:

{
<script src='https://cdn.jsdelivr.net/npm/hls.js@latest' type='text/javascript'></script>
<video id='hlsjs_video_tag'></video>
<script>
  var config = {
  "enableWorker": true,
  "lowLatencyMode": true,
  "backBufferLength": 1.5,
  "maxBufferLength": 5,
  "maxMaxBufferLength": 60
  }
  var video = document.getElementById('hlsjs_video_tag');
  var hls = new Hls();
  hls.loadSource('https://domain.com/abr/stream/playlist.m3u8');
  hls.attachMedia(video);
  hls.on(Hls.Events.MANIFEST_PARSED,function() {
    video.play();
  });
</script>
}

Playing it for the first time makes it stick to the backBufferLength which I like best but kinda lags for the first 1-2 secs. If I can have this loading-in-the-background-before-the-user-presses-play feature, I think it would fix that, right?

[dylanjha]

Hi @MoZyo -- thanks for reaching out, happy to help.

What you're looking for is a fairly common request, but it's a UI concern for your player. Hls.js works directly on top of the built in <video> element in the browser. Hls.js is focused on implementing Hls playback and explicitly does not implement any UI features like play buttons, poster images, etc.

You may find other projects like media-chrome helpful for building out UI in your Hls.js-powered player.