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>