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>