sampotts / plyr

A simple HTML5, YouTube and Vimeo player
https://plyr.io
MIT License
26.63k stars 2.93k forks source link

Option for automatic resumption of interrupted video streams #2040

Open leaf-node opened 3 years ago

leaf-node commented 3 years ago

Hi, I wrote some JS code to resume an Icecast video feed that goes down temporarily due to network problems, or a temporary stop/restart of the video stream, say between talks at a conference. I'm not sure that I used the right approach, and ideally our stream should never be interrupted, but it would be great if Plyr could be configured to re-try.

Here's the JS I wrote for this previously (I was using Plyr 3.6.2):

const videoTag = document.getElementById('fsf-35-video');
const videoSource = document.getElementById('fsf-35-video-source')
const reloadButton = document.getElementById("fsf-35-video-reload-button");

setVideoSource();

reloadButton.addEventListener("click", reloadFSFVideo);
videoTag.addEventListener("ended", lazyReloadFSFVideo);
videoSource.addEventListener("error", function (e) {
  // network error
  if (e.target.parentNode.networkState === 3) {
    lazyReloadFSFVideo();
  }
});

// this sets a param so the video reload will never come from cache
function setVideoSource () {
  videoSource.setAttribute('src', 'http://streamserver0p.fsf.org/fsf35.webm?t=' + Date.now());
}

function reloadFSFVideo () {
  setVideoSource();
  videoTag.load();
  videoTag.play();
};

reAttemptScheduled = false;
function lazyReloadFSFVideo () {
  if (!reAttemptScheduled) {
    setTimeout(function () {
      reAttemptScheduled = false;
      reloadFSFVideo();
    }, 3000)
    reAttemptScheduled = true;
  }
}

In early testing, the automatic resumption of the video feed worked great, but then later on, in prod, it didn't work out when we needed it, so people had to manually click the div I created under the video to reload the video. I'm not sure what the cause of the issue was, but it could be that I was using part of the Firefox browser API in a way that was not intended.

Thanks for Plyr! : )

cloudf73 commented 3 years ago

remove this if check. if (e.target.parentNode.networkState === 3)