Video.js - Live stream offline options

Latest (minor) version 7.2.1 of Nuevo plugin for Video.js features 2 new experimental options to show custom image or play custom stream when live stream is offline.

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.

Videojs offline image

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 ffline image or play custom offline stream? Both are Nuevo plugin options, easy to setup.

Code Snippet
player.nuevo({ offlineImage: "//domain.com/path-to-offline-image.jpg" });
Or
Code Snippet
player.nuevo({ offlineStream: "//domain.com/path-to-offline-stream.m3u8" });

In other example below, this is same invalid (empty) playlist as above, that player attempts to load. On error it is redirected to play another, working live stream.

offlineImage and offlineStream options do not cover media file 404 Not Found error. Such error may concern any file, any media type. 404 error means that the could not find what was requested and it's not good to produce such error for any reason. However. if you have no other choice, you may use offline404:true option, so together wiht offlineImage or offlineStream will end as in examples above.

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

If you follow Nuevodevel website regularly, you may need to clear browser's cache to see the most recent, presented features.

Nuevodevel Blog
Nuevodevel Tweeter