.video-js.vjs-offline.vjs-error.vjs-colorbars,
.video-js.vjs-offline.vjs-ended.vjs-colorbars {
  background: #000;
  background-image: url("css/images/colorbars.png") !important;
  background-repeat: no-repeat;
  background-size: 100% 100% !important;
}

This example displays the use of the offline feature. Overriding player error handlers to allow for reconnection with a custom message and display colorbars as a background.

Introduction

The Live Offline plugin enables overriding player error handlers to allow for reconnection with a custom message and display colorbars as a background.

This is useful when live streams are yet to go live and let the user manually re-attempt connection or auto connect.

For Live HLS , some servers like Ant Media Server and Mux support ENDLIST tags. When the encoder stops, this helps determine ending of streams to display an end screen. With a config reconnectOnEndStream, reconnection is possible which will end determined by a connect cycle time config endTimeCount.

Using the video.js middleware stream resolver api. A pseudo random round robin load balancer and fallback for edge source selection is possible.

A TV noise animation option can be used for offline reconnection mode.

A custom configurable message can display useful offline messages.

Features

• Functional player to reconnect live steams when offline and not publishing or on connection cuts.
• HLS end stream detection support with supported servers.
• Automatic reconnection feature.
• Customisable message and colorbars background.
• TV Noise effect background effect.
• Load balancer round robin and fallback source selection support.
• Fix for Mux to end and reconnect properly on cached segements.

Vue.JS Support

Vue.JS 2 is supported. The plugin needs to be treated as a 3rd party script and loaded externally before initializing the player. The CSS can be imported as normal.