Videojs VHS alternative for HLS streaming

LIVE Example
For more HTTP streaming examples check Stream Tester tool.

VideoJs player with Nuevo theme and plugin HLS streaming tests

HTTP Live Streaming (HLS) has become a de-facto standard for streaming video on desktop and on mobile devices.
HLS protocol is managed by videojs-http-streaming (VHS) library, included in video.js 7 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 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.

Original hlsjs plugin was developed by Streamroot some years ago and utilize an old version (0.13.2) of hls.js library. Hlsjs plugin modified by Nuevodevel.com utilize much more newer version of hls.js (1.1.2) and is properly integrated with quality levels when hls 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
<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" 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 that you may apply according to hls.js API Doc
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
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);
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
player.ready(function(){
   player.hlsjs.on(Hls.Events.MANIFEST_LOADED, function (event, data) {
      console.log('Manifest loaded');
   });
});
Hlsjs plugin by Nuevodevel.com switches quality levels smoothly with small delay, when next HLS fragment is played. You can disable this functionality to switch between quality levels immediately.
The adaptive algorithm limits quality levels by 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>