HLS stream HTML5 video - refresh after buffering for X time

Question

I have a simple site with an HLS stream from a m3u8 playlist in an autoplay video tag. If the stream stops for more than 10s or so it will not "catch up" and start again when the stream is restarted - I need to manually refresh the page to get it to play again.

Is there a way with js (or something else) to automatically refresh the page after the video has been buffering for X time? (say 5 seconds)

Answer 1

I managed to get this with some help from VC.One's answer. This will reload after the video has been buffering for 5 seconds, if the video was previously playing. Otherwise it will be stuck in a reload loop if it never starts playing. I am still looking for a way to check whether the stream is live without actually reloading the page. video.load() and video.play() are giving me errors, but I will update this post when I figure it out.

var reloadCheck;
var reloadThisTime;
var video = document.getElementById("videotag");
var sourcetag = document.getElementById("sourcetag");
video.addEventListener('waiting', (event) => {
  console.log("No connection");
  reloadCheck = setTimeout(function(){
    if(reloadThisTime){
      location = '';
    };
  },5000);
});

video.addEventListener('playing', (event) => {
  console.log("Connected");
  clearTimeout(reloadCheck);
  reloadThisTime = true;
});