Live Offline Stream Plugin Documentation

Live Offline Options

Here is a list of the configuration options:

Property	Description	Default
autoreconnect	Automatically attempt to reconnect after a set interval.	false
reconnectTime	Reconnect after a set delay.	30
noise	Enable TV Noise animation on offline.	false
offline	The offline message.
reconnect	Reconnecting message.
endTimeCount	Reconnect count until end of Stream	10
retryConnectTime	Time to retry connection.	10
hlsRetryCount	Allow a number of internal HLS retries before a reconnection.	5
fallbackResolver	Enable source selection resolver for edge servers.	false
roundRobin	Enable random round robin soure selection.	false
reconnectOnEndStream	Reconnection on detected HLS end of stream.	false
hidePlay	Hide play button on error. Click player container for replay.

HLS End Of Stream

Servers tested to support Live HLS end of stream. This allows to provide an end screen or automatically reconnect.

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. A window variable videojs is required. Example documentation is provided. Example documentation.

<template>
  <div>
    <video autoplay muted playsinline webkit-playsinline ref="videoPlayer" class="video-js"/>
  </div>
</template>

<script lang="ts">
import {Component, Ref, Vue} from 'vue-property-decorator';
import { loadScript } from "vue-plugin-load-script";
import videojs, {VideoJsPlayer} from 'video.js';
import "video.js/dist/video-js.css";
import "@/css/live-offline.min.css";


declare module 'video.js' {
  export interface VideoJsPlayer {
    liveoffline: (options?: Partial<any>) => any;
  }
}

declare global {
    interface Window { videojs: any }
}

@Component
export default class App extends Vue {
  @Ref("videoPlayer") private videoPlayerEl!: HTMLVideoElement;
  private videoJsPlayer!: VideoJsPlayer;

  beforeCreate() {
    window.videojs = videojs;
  }

  mounted() {
    //load plugin then initialize player
    loadScript("js/live-offline-7.11.5.js")
    .then(() => {
      this.videoJsPlayer = videojs(this.videoPlayerEl, {
        aspectRatio: "16:9",
        controls: true,
        liveui: true,
        "sources": [
          {
              "src": "https://stream.mux.com/02Oi2Pcm02P9e6awFP00gfc29VlAaEek7lH5TvQwef1VqU.m3u8",
              "type": "application/x-mpegurl"
          }
        ],
        plugins: {
          "liveoffline": {
              "autoreconnect": true,
              "offline": "Offline",
              "reconnect": "Reconnecting In ",
              "reconnectTime": 30,
              endTimeCount: 10,
              healthCheckRequest: "GET",
              reconnectOnEndStream: true,
              hidePlay: true,
              hlsRetryCount: 0,
              reconnectCheck: true
          }
        }

      });
    })
    .catch(() => {
      // Failed to fetch script
    });




  }

  beforeDestroy() {
    if (this.videoJsPlayer) {
      this.videoJsPlayer.dispose()
    }
  }
}
</script>
<style lang="scss">


</style>