Try stream recovery with a custom error message using Web Components
Sample implementation
.flowplayer {
max-width: 30em;
}
Code
Libraries
<!-- <head> -->
<link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css" />
<!-- <body> -->
<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/hls.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/message.min.js"></script>
HTML code
<div id="player"></div>
Javascript
<!-- player configuration injected into the #player container, plus API scripting with Web Component -->
<script>
var api = flowplayer('#player', {
//example token, use your own when trying this yourself
token: "eyJraWQiOiJxaEZ6dWR4dmJuTDMiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCJxaEZ6dWR4dmJuTDNcIixcImRvbWFpblwiOltcImZsb3dwbGF5ZXIuY29tXCJdfSIsImlzcyI6IkZsb3dwbGF5ZXIifQ.pdpIEfbRN_6P-ayyNsEazPPPjr0RSmd8SjJyqp8w8BYXTYsg11FjCODutzLZ6jkSm5hHTqfg05cCVuHcFIfI1w",
src: "https://edge.flowplayer.org/invalid.m3u8",
preload: "auto",
//example namespace for plugin configuration
hls: {native: false}
})
class Error extends HTMLElement{
constructor(player) {
super()
this.className = "fp-error"
this.addEventListener(flowplayer.events.ERROR, ()=> {
this.textContent = "Stream offline, attempting reconnect"
setTimeout(function() {
// Try again in 3 seconds, normally you should just call player.load(), we change the source for demo purposes
player.setSrc('//edge.flowplayer.org/bauhaus.m3u8')
player.load()
player.once(flowplayer.events.LOAD_START, ()=> player.togglePlay())
}, 3000)
})
}
}
window.customElements.define("error-component", Error)
flowplayer.customElements.set("flowplayer-error", "error-component")
</script>
Standalone demo
stream retry demo