Try stream recovery with a custom error message

The stream retry demo shows how Flowplayer Native can recover from a stream error: the player shows a custom "reconnecting" message with the message plugin 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

var api = flowplayer('#player', {
  //example token, use your own when trying this yourself
  token: "eyJraWQiOiI3cW5idHhsWkhMcWUiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCI3cW5idHhsWkhMcWVcIixcImRvbWFpblwiOltcImZsb3dwbGF5ZXIuY29tXCJdfSIsImlzcyI6IkZsb3dwbGF5ZXIifQ.7hqE246u2u_UbEXuEwcgM4LOqQOJkJT3bQaqcR023mazRZHKuAbYaxrIlPTXZIvl8iDu2wMkz5LSp3fE55xQgQ",
  src: "//edge.flowplayer.org/invalid.m3u8",
  preload: "auto"
})
api.on(flowplayer.events.ERROR, function(ev) {
  ev.preventDefault()
  api.setState(flowplayer.states.ERRORED, true)
  api.emit(flowplayer.message.events.SHOW_MESSAGE, { message: 'Stream offline, reconnecting..'})
  setTimeout(function() {
    api.setState(flowplayer.states.ERRORED, false)
    // Try again in 3 seconds
    // normally you should just call api.load()
    // we change the source for demo purposes to a working stream
    api.setSrc('//edge.flowplayer.org/bauhaus.m3u8')
    api.load()
  }, 3000)
})

Standalone demo

stream retry demo