Flowplayer · VOD pre-roll - Live feature

<head/>

For smoother HLS playback in modern browsers we load the hlsjs plugin.

<!-- Flowplayer library -->
<script src="//releases.flowplayer.org/7.2.4/flowplayer.min.js"></script>
<!-- Flowplayer hlsjs engine (light) -->
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.light.min.js"></script>

HTML

<style>

.flowplayer {
  background-color: #2f2f4f;
}
.flowplayer .fp-color-play {
  fill: #eee;
}
/* hide no-op control icons during pre-roll */
.flowplayer.is-disabled .fp-airplay,
.flowplayer.is-disabled .fp-chromecast,
.flowplayer.is-disabled .fp-playbtn,
.flowplayer.is-disabled .fp-volume,
.flowplayer.is-disabled .fp-fullscreen {
  display: none;
}

CSS

<script>

The live property is set on the clip level.

window.onload = function () {
 
  flowplayer("#player", {
    ratio: 9/16,
    splash: true,
    share: false,
    hlsjs: {
      // these streams work ok in desktop Safari
      safari: true
    },
 
    // live stream only available via https:
    // force loading of Flash HLS via https
    swfHls: "https://releases.flowplayer.org/7.2.4/flowplayerhls.swf",
 
    // no playlist UI to make pre-roll -> feature mandatory
    customPlaylist: true,
    playlist: [{
      live: false,
      hlsQualities: false,
      title: "VOD Pre-roll",
      sources: [
        { type: "application/x-mpegurl",
          src:  "https://edge.flowplayer.org/moon.m3u8" }
      ]
    }, {
      live: true,
      title: "Live Feature",
      sources: [
        { type: "application/x-mpegurl",
          src: "https://nasa-i.akamaihd.net/hls/live/253565/NASA-NTV1-Public/master.m3u8" }
      ]
    }]
 
  }).on("ready", function (e, api, video) {
    // disable API for pre-roll
    api.disable(!video.index);
 
    // info for demo purposes only
    document.getElementById("playing").innerHTML =
        api.engine.engineName + " engine playing " + video.src;
 
  });
 
};

JavaScript

<body/>

<div id="player"></div>
 
<!-- only for demo purposes -->
<p id="playing" class="info">&nbsp;</p>

HTML