Videojs VHS alternative for HLS streaming

For more HTTP streaming examples check Stream Tester tool.

HLS protocol is managed by videojs-http-streaming (VHS) library, included in the video.js from version 7.0 by default. Unfortunately, some video.js users have trouble with playing HLS content using default video.js VHS engine. Also VHS does not support mp3 audio for HLS streams and will not allow to use the P2P Media Loader, an open source library to deliver media over Peer-toPeer network. For this reason Nuevo plugin from version 8.0 has been updated to support 3rd party HLSJS plugin based on hls.js library as an alternative for default VHS engine. This includes HLS quality picker.

The original hlsjs plugin was developed by Streamroot many years ago and utilizes an old version (0.13.2) of hls.js library. Hlsjs plugin modified by Nuevodevel.com makes use of much more newer (regularly updated) version of hls.js (1.2.7) and is properly integrated with quality levels when hls stream is reinitialized with new media source, which is an issue with original hlsjs.

All you have to do is to load hlsjs.js javascript plugin right after video.js.

Code snippet

<link href="//domain.com/videojs/skins/nuevo/videojs.min.css" rel="stylesheet">
<script src="//domain.com/videojs/video.min.js"></script>
<script src="//domain.com/videojs/plugins/hlsjs.js"></script>
<script src="//domain.com/videojs/nuevo.min.js"></script>

<video id="myplayer" class="video-js vjs-fluid" poster="//domain.com/path/to/poster.jpg" controls preload="auto">
<source src="//domain.com/path/to/playlist.m3u8" type="application/x-mpegURL">
</video>

<script>
var player = videojs('example-video');
player.nuevo({
contextMenu:false
});
</script>

Since HLS plugin is based on hls.js library, it features many configuration fine-tuning options, described in hls.js API Doc. You can use any of available options through hlsjs plugin too.

Code snippet

<script>
var hls_options = {
html5: {
hlsjsConfig: {
"debug": true,
"enableWorker": true,
"lowLatencyMode": true,
"backBufferLength": 90
}
}
};
var player = videojs('example-video', hls_options);
player.nuevo({ contextMenu:false });
</script>

Sometimes you may need to extend hls.js, or have access to the hls.js before playback starts. For these cases, you can register a function to the beforeinitialize hook, which will be called right after hls.js instance is created. This gives you direct access to HLS and for example allows to catch HLS events, errors, etc.

Code snippet

<script>
var callback = function(videojsPlayer, hlsjs) {

hlsjs.on(Hls.Events.MANIFEST_LOADED, function(event, data) {
console.log('Manifest loaded');
});
// do anything else
};
videojs.Html5Hlsjs.addHook('beforeinitialize', callback);
</script>

You can remove the hook by:

Code snippet

videojs.Html5Hlsjs.removeHook('beforeinitialize', callback);

Another simple method to access hls.js and for example catch hls.js events as above is:

Code snippet

<script>
player.ready(function(){
player.hlsjs.on(Hls.Events.MANIFEST_LOADED, function (event, data) {
console.log('Manifest loaded');
});
});
</script>

Hlsjs plugin by Nuevodevel.com switches quality levels smoothly with small delay, when a next HLS fragment is played. You can disable this functionality to switch between quality levels immediately.
The adaptive algorithm limits quality levels by the user's bandwidth and the HTML video element dimensions. You can disable this functionality, so available quality levels are used in auto-quality mode taking only bandwidth into consideration.

Code snippet

<script>
var hls_options = {
html5: {
hlsjsConfig: {
smoothQualityChange: false,
capLevelToPlayerSize: false
}
}
};
var player = videojs('example-video', hls_options);
player.nuevo({ contextMenu:false });
</script>