Flowplayer · hlsjs plugin

VOD

player engine:

video type:

 

Video courtesy of Figs In Wigs

Live

player engine:

video type:

 

The Flowplayer hlsjs plugin 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 loading the plugin the widest possible audience range enjoys the benefits of Adaptive Bit Rate streaming (ABR).

In the VOD example manual HLS level selection is set up, which in turn fails over smoothly to manual VOD quality selection with the quality selector plugin where hlsjs is not supported.

In the life stream example only manual HLS level selection can be offered.

Advantages over Dash (a similar technology):

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 engine plugin is packed with a compatibility tested version of the hls.js client library. It offers various ways to improve fine tuning the HLS experience in the player configuration which are not available with builtin client implementations.

Source picking order

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

<head/>

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

<!-- optional: the quality selector stylesheet -->
<link rel="stylesheet" href="//releases.flowplayer.org/quality-selector/flowplayer.quality-selector.css">
 
<!-- ... -->
 
<!-- Flowplayer library -->
<script src="//releases.flowplayer.org/6.0.5/flowplayer.min.js"></script>
 
<!-- load the Flowplayer hlsjs engine, including hls.js -->
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script>
 
<!-- optional: the quality selector plugin for quality selection when hlsjs is not supported -->
<script src="//releases.flowplayer.org/quality-selector/flowplayer.quality-selector.min.js"></script>

HTML

<style>

#hlsjsvod {
background-image: url(http://demos.flowplayer.org/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 !== "hlsjs") {
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
detail.innerHTML = "Resolution: " + vtag.videoWidth + "x" + vtag.videoHeight;
}
});
 
});
/* end global event listeners setup */
 

window.onload = function () {
 
flowplayer("#hlsjsvod", {
splash: true,
embed: false, // setup would need iframe embedding
ratio: 9/16,
 
hlsQualities: "drive",
 
// manual VOD quality selection when hlsjs is not supported
defaultQuality: "360p",
qualities: ["216p", "360p", "720p"],
 
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,
embed: false,
ratio: 9/16,
 
// stream only available via https:
// force loading of Flash HLS via https
swfHls: "https://releases.flowplayer.org/6.0.5/flowplayerhls.swf",
 
clip: {
hlsQualities: true,
// 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="is-closeable"></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="is-closeable"></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