Skip to content

Instantly share code, notes, and snippets.

@dmlap
Last active July 21, 2023 02:05
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dmlap/98d72cb607325a6640768ca58323ce2e to your computer and use it in GitHub Desktop.
Save dmlap/98d72cb607325a6640768ca58323ce2e to your computer and use it in GitHub Desktop.
Basic instructions for the reloadSourceOnError plugin.

Using the reloadSourceOnError Plugin

Call the plugin activate it:

player.reloadSourceOnError()

Now if the player encounters a fatal error during playback, it will automatically attempt to reload the current source. If the error was caused by a transient browser or networking problem, this can allow playback to continue with a minimum of disruption to your viewers.

The plugin will only restart your player once in a 30 second time span so that your player doesn't get into a reload loop if it encounters non-transient errors. You can tweak the amount of time required between restarts by adjusting the errorInterval option.

If your video URLs are time-sensitive, the original source could be invalid by the time an error occurs. If that's the case, you can provide a getSource callback to regenerate a valid source object. In your callback, the this keyword is a reference to the player that errored. The first argument to getSources is a function. Invoke that function and pass in your new source object when you're ready.

player.reloadSourceOnError({

  // getSource allows you to override the source object used when an error occurs
  getSource: function(reload) {
    console.log('Reloading because of an error');

    // call reload() with a fresh source object
    // you can do this step asynchronously if you want (but the error dialog will
    // show up while you're waiting)
    reload({
      src: 'https://example.com/index.m3u8?token=abc123ef789',
      type: 'application/x-mpegURL'
    }); 
  }, 
  
  // errorInterval specifies the minimum amount of seconds that must pass before 
  // another reload will be attempted
  errorInterval: 5 
});
@imbcmdth
Copy link

imbcmdth commented Nov 10, 2016

Might want to make a note that doing an async request for the source will result in the error dialog being displayed until a new source is set. ...or suggest ways around that behavior.

@imbcmdth
Copy link

Otherwise, LGTM!

@davexpro
Copy link

davexpro commented Feb 7, 2017

It's FUXKING AWESOME ! It helps me a lot! THANK YOU VERY MUCH!

@ajw725
Copy link

ajw725 commented Jun 25, 2018

this plugin unfortunately doesn't work in Safari 11.1 (with VideoJS 7.0.3), and i can't figure out how to replicate the functionality. in Safari, for whatever reason, the "error" event just doesn't seem to fire. the request to the video URL returns a 403, but there's no uncaught exception or any kind of event i can find to bind to in order to reload the source.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment