Video.js - Live stream offline options

Since Nuevo plugin version 8.0 all offline methods and options have been depreciated. New offline plugin is an easy to use alternative to show image or play video when live stream is temporary not available.

Few words of explanation. How do we know that live stream is offline?

On browsers with Media Source Extension (MSE) video.js attempts to load live stream playlist every 4-5 seconds about. So if the playlist m3u8 protocol is empty, video.js will continue to try it in a loop for endless time. Until playlist not tried we do not know that playlist is not valid stream. But once playlist fail to load stream, we are ready to redirect player to another stream or to reset the player and show offline image.

On browsers missing MSE like iOS Safari on iPhone, video.js does not fire invalid playlist load event, but in opposite it fires other events like MEDIA_ERR_DECODE or MEDIA_ERR_NETWORK. And this is the moment when we can redirect stream or show offline image. Such errors are fired even faster than on desktop browsers and Android, but this is normal. On iOS browser, this is native stream, controlled by device, on desktop browsers and Android live stream is controlled programmatically by MSE.

See example below. The player attempts to load m3u8 playlist. But since it is empty, it shows custom offline image.

What are options to show custom offline image or play custom offline stream? The most basic offline plugin setup is:

player.nuevo({ offlineImage: "//domain.com/path-to-offline-image.jpg" });