Videojs VHS alternative for HLS streaming

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 many video.js users have trouble with playing HLS content using default VHS engine. Also VHS does 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 HLS plugin based on hls.js library as an alternative for default VHS engine. This includes HLS quality picker.

All you have to do is to load hlsjs.js javascript plugin right after video.js.
Code snippet
<script type=text/javascript" src="//domain.com/videojs/video.min.js"></script>
<script type=text/javascript" src="//domain.com/videojs/plugins/hlsjs.js"></script>
<script type=text/javascript" 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({
	logo: "//domain.com/path/to/logo.png",
	logourl: "/domain.com"
});
</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
            }
        }
    };
    var player = videojs('example-video', hls_options);
</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.
Code snippet
var callback = function(videojsPlayer, hlsjs) {
  // do something
};
videojs.Html5Hlsjs.addHook('beforeinitialize', callback);
You can remove the hook by:
Code snippet
videojs.Html5Hlsjs.removeHook('beforeinitialize', callback);
Since Nuevo plugin version 8.0 you can force the player to use one from available video qualities as initial quality, instead of "auto" option. For this purpose you need to load HLS media programmatically with starLevel option equal to chosen resolution or bandwidth (bits per second), not through <video> src tag.
Code snippet
<script>
var player = videojs('example-video');
player.nuevo({
	logo: "//domain.com/path/to/logo.png",
	logourl: "/domain.com"
});
player.src({src:"//domain.com/path/to/playlist.m3u8", type:"application/x-mpegURL", startLevel: 720});
</script>