Quality selection plugin

Demonstrates the quality selection plugin with an additional localStoarge scritp to remember the selected quality.

Sample implementation

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/qsel.min.js"></script>

HTML code

<div id="player"></div>

<form id="controls">
    <fieldset>
        <p>
            <input id="remember_quality" type="checkbox">
            <label for="remember_quality" class="label-inline">Remember quality</label>
        </p>
    </fieldset>
</form>

Javascript

var player = window.player = flowplayer("#player", {
    token: "eyJraWQiOiJxaEZ6dWR4dmJuTDMiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCJxaEZ6dWR4dmJuTDNcIixcImRvbWFpblwiOltcImZsb3dwbGF5ZXIuY29tXCJdfSIsImlzcyI6IkZsb3dwbGF5ZXIifQ.pdpIEfbRN_6P-ayyNsEazPPPjr0RSmd8SjJyqp8w8BYXTYsg11FjCODutzLZ6jkSm5hHTqfg05cCVuHcFIfI1w"
  , src    : "https://cdn.flowplayer.com/d9cd469f-14fc-4b7b-a7f6-ccbfa755dcb8/hls/383f752a-cbd1-4691-a73f-a4e583391b3d/playlist.m3u8"
  , poster : "https://cdn.flowplayer.com/ff29b1b7-5ffd-432f-b2fc-1a2f40f04651/i/v-i-6f9c4b41-be66-45ca-997c-ed142e3a88a3-1568228325117.jpg"
  , title  : "flowplayer / hls"
})

var previous_quality = false, remember = false

try {
  previous_quality = localStorage.previous_quality ? Number(localStorage.previous_quality) : false
  remember = !!localStorage.remember_quality
} catch (e) {
  console.warn("Localstorage not available:", e)
}

var toggle_el = document.querySelector("#remember_quality")
if (remember) toggle_el.checked = true

toggle_el.addEventListener("change", function() {
  try {
    localStorage.remember_quality = toggle_el.checked ? 1 : ""
  } catch (e) {
    toggle_el.checked = false // Localstorage not available
  }
})

if (previous_quality !== false && remember) {
  player.on(flowplayer.events.QUALITIES, function() { // Qualities available
    player.emit(flowplayer.events.SET_QUALITY, { level: previous_quality })
  })
}

player.on(flowplayer.events.SET_QUALITY, function(ev) {
  try {
    localStorage.previous_quality = ev.data.level
  } catch (e) {
    // Localstorage not available
  }
})

Standalone demo

qsel plugin demo

DASH plugin Message plugin
Results