Try stream recovery with a custom error message using Web Components

The Web Components stream retry demo replaces the Flowplayer Native error element with a custom Web Component that shows a reconnecting message and loads the stream again after three seconds.

Sample implementation

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: "eyJraWQiOiI3cW5idHhsWkhMcWUiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCI3cW5idHhsWkhMcWVcIixcImRvbWFpblwiOltcImZsb3dwbGF5ZXIuY29tXCJdfSIsImlzcyI6IkZsb3dwbGF5ZXIifQ.7hqE246u2u_UbEXuEwcgM4LOqQOJkJT3bQaqcR023mazRZHKuAbYaxrIlPTXZIvl8iDu2wMkz5LSp3fE55xQgQ",
  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