Flowplayer · hlsjs plugin

Live

Note: the stream is not available with https at the moment, so please use the http version of the demo

player engine:

video type:

The Flowplayer hlsjs-lite engine allows to play HLS streams in browsers which do not support HLS. And it does so without the need for Flash. This results in a performance improvement and avoids increasing restrictions on Flash imposed by browser manufacturers and in-house company policies. Simply by including the hls.js client library the widest possible audience range enjoys the benefits of Adaptive Bit Rate streaming (ABR).

Advantages over Dash (a similar technology):

no additional source required to cover an even wider range of clients
works with the HLS streams or your Flowplayer Drive account (like the example above)

Compare with the dashjs plugin.

Playback relies on the MediaSource-feature of browsers and the MediaSource implementation must reliably support segmented MPEG-4 video so hls.js can handle it. Your browser: .

The hlsjs-lite engine interacts with the hls.js client library.

Source picking order

HLS (ABR) via hlsjs engie: Chrome 34+, Firefox 42+, Internet Explorer 11+, Opera 30+, Chrome 34+ for Android
HLS (ABR) generic: Safari, iOS, most mobile devices
HLS (ABR) Flash: browsers with Flash enabled
WEBM (fallback)
MP4 (fallback)

<head/>

The following JavaScript assets are loaded in the HEAD section of the page:

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

HTML

<style>

#hlsjsvod {
  background-image: url(//demos.flowplayer.com/media/img/figsinwigs.jpg);
  background-color: #f60;
}
#hlsjslive {
  background-color: #2f2f4f;
}

CSS

<script>

Then the player can be installed as usual:

/* global event listeners for demo purposes, omit in production */
flowplayer(function (api, root) {
  var instanceId = root.getAttribute("data-flowplayer-instance-id"),
      engineInfo = document.getElementById("engine" + instanceId),
      vtypeInfo = document.getElementById("vtype" + instanceId),
      detail = document.getElementById("detail" + instanceId);
 
  api.on("ready", function (e, api, video) {
    var engineName = api.engine.engineName;
 
    engineInfo.innerHTML = engineName;
    vtypeInfo.innerHTML = video.type;
    if (engineName === "flash") {
      detail.innerHTML = "video source: " + video.src;
    }
 
  }).on("progress", function (e, api) {
    var hlsengine = api.engine.hlsjs,
        vtag = api.engine.engineName === "html5" && root.querySelector(".fp-engine");
 
    if (hlsengine) {
      var current = hlsengine.currentLevel,
          level = hlsengine.levels[current],
          info;
 
      if (level) {
        info = api.conf.clip.live
            ? level.bitrate / 1000 + " kbps"
            : level.height + "p";
 
        detail.innerHTML = "HLS level " + (current > -1
            ? current + ": " + info
            : "");
      }
 
    } else if (vtag) {
      // native playback, less informative
      detail.innerHTML = "Resolution: " + vtag.videoWidth + "x" + vtag.videoHeight;
    }
  });
 
});
/* end global event listeners setup */
 

window.onload = function () {
 
  flowplayer("#hlsjsvod", {
    splash: true,
    aspectRatio: "16:9",
 
    clip: {
      // enable hlsjs in desktop Safari for manual quality selection
      // CAVEAT: may cause decoding problems with some streams!
      hlsjs: {
        safari: true
      },
 
      sources: [
        { type: "application/x-mpegurl",
          src:  "//edge.flowplayer.org/cilla_black_bean_sauce.m3u8" },
        { type: "video/mp4",
          src:  "//edge.flowplayer.org/cilla_black_bean_sauce.mp4" }
      ]
    }
 
  });
 

  flowplayer("#hlsjslive", {
    splash: true,
    ratio: 9/16,
 
    // stream only available via https:
    // force loading of Flash HLS via https
    swfHls: "https://releases.flowplayer.org/7.2.4/flowplayerhls.swf",
 
    clip: {
      // enable hlsjs in desktop Safari for manual quality selection
      // CAVEAT: may cause decoding problems with some streams!
      hlsjs: {
        safari: true
      },
      live: true,
      sources: [
        { type: "application/x-mpegurl",
          src: "https://nasa-i.akamaihd.net/hls/live/253565/NASA-NTV1-Public/master.m3u8" }
      ]
    }
 
  });
 
};

JavaScript

<body/>

<h2 id="vod">VOD</h2>
 
<div id="hlsjsvod" class="fp-slim"></div>
 
<div class="info">
  <p>player engine: <span id="engine0"></span></p>
 
  <p>video type: <span id="vtype0"></span></p>
 
  <p id="detail0">&nbsp;</p>
</div>
 
<p class="info">Video courtesy of <a href="https://www.figsinwigs.com/">Figs In Wigs</a></p>
 
<h2 id="live">Live</h2>
 
<div id="hlsjslive" class="fp-slim"></div>
 
<div class="info">
  <p>player engine: <span id="engine1"></span></p>
 
  <p>video type: <span id="vtype1"></span></p>
 
  <p id="detail1">&nbsp;</p>
</div>

HTML