Flowplayer · hlsjs plugin

VOD

player engine:

video type:

 

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).

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 hls.js courtesy of dailymotion. 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:

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

HTML

<style>

#hlsjsvod {
background-image: url(//drive.cdn.flowplayer.org/202777/84049-snap.jpg);
}
#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;
 
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
: "");
}
}
});
 
});
/* end global event listeners setup */
 

window.onload = function () {
 
flowplayer("#hlsjsvod", {
splash: true,
ratio: 5/12,
 
// manual HLS level selection for Drive videos
hlsQualities: "drive",
 
clip: {
sources: [
{ type: "application/x-mpegurl",
src: "//cdn.flowplayer.org/202777/84049-bauhaus.m3u8" },
{ type: "video/mp4",
src: "//cdn.flowplayer.org/202777/84049-bauhaus.mp4" }
]
}
 
});
 

flowplayer("#hlsjslive", {
splash: true,
ratio: 9/16,
clip: {
live: true,
sources: [
{ type: "application/x-mpegurl",
src: "//nasatv-lh.akamaihd.net/i/NASA_101@319270/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>
 
<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