HLS Streaming Examples

VideoJs player with Nuevo theme and plugin HLS streaming tests
Demo 1 Demo 2
HTTP Live Streaming (HLS) has become a de-facto standard for streaming video on desktop and on mobile devices thanks to its native support on iOS and Android.
Video example above is HLS adaptive bitrate streaming based on m3u8 manifest file. Nuevo plugin for videojs has built in HLS stream quality selector, which appears automatically for desktop PC. Changing quality is not immediate, as it can be changed only from video fragment to fragment.


videojs HLS streaming supports a bunch of HLS features. Here are some highlights:
  • video-on-demand and live playback modes.
  • backup or redundant streams.
  • mid-segment quality switching.
  • AES-128 segment encryption.
  • CEA-608 captions are automatically translated into standard HTML5 caption text tracks.
  • Timed ID3 Metadata is automatically translated into HTML5 metedata text tracks.
  • Highly customizable adaptive bitrate selection.
  • Automatic bandwidth tracking.
  • Cross-domain credentials support with CORS.
  • Tight integration with video.js and a philosophy of exposing as much as possible with standard HTML APIs.
  • Stream with multiple audio tracks and switching to those audio tracks.
  • Media content in fragmented MP4s instead of the MPEG2-TS container format.

<script type=text/javascript" src="//domain.com/videojs/video.min.js"></script>
<script type=text/javascript" src="//domain.com/video-s/nuevo.min.js"></script>

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

<script>
// Optionally override HTML native playback, usually required for Android devices, but not for iOS.
videojs.options.hls.overrideNative = true;
videojs.options.html5.nativeAudioTracks = false;
videojs.options.html5.nativeTextTracks = false;

//Initialize videojs player
var player = videojs('myplayer');
player.nuevo({
	logo: "//domain.com/path/to/logo.png",
	logourl: "/domain.com"
});
</script>

HLS Device and Cross Browser Support

Chrome - Supported since Chrome version 30+
Firefox - Supported since Firefox version 42+
Internet Explorer 10+ - Supported since IE 11 (Windows 8+ only)
Microsoft Edge
Safari - Supported since Safari version 8+
Opera - Supported since Opera version 15+

Android - Supported on Chrome and Firefox for Android 4.0+
IOS - Supported on iOS 3+
Windows Phone - Supported on Windows Phone 8+


Stndard Video Format Fallback

Since not every browser on certain platform supports MediaSourceExtension required to play HLS stream, it is suggested to offer fallback to standard video format like MP4 or WEBM.
It's possible to detect MediaSourceExtension using javascript and order to play appropriate video source format however since Nuevo plugin v 3.1 you do not have to bother about HLS browser's support and define fallback video within same source element. It's even possible to provide multiple quality fallback sources. Both demos on this page use such fallback, so for example this is not a problem to keep player working on Windows 7 with IE 11 where MediaSourceExtension and HLS playback is not supported. See the code example below.

<script type=text/javascript" src="//domain.com/video-js/video.min.js"></script>
<script type=text/javascript" src="//domain.com/video-js/nuevo.min.js"></script>

<video id="myplayer" class="video-js vjs-default-skin" poster="//domain.com/path/to/poster.jpg" controls preload="auto">
  <source src="//domain.com/path/to/playlist.m3u8" type="application/x-mpegURL">
  // Fallback mp4 video with multiple resolution variants  
  <source src="//domain.com/path/to/video_720p.mp4" type="video/mp4" res="720" label="720p">
  <source src="//domain.com/path/to/video_480p.mp4" type="video/mp4" res="480" label="480p">
  <source src="//domain.com/path/to/video_240p.mp4" type="video/mp4" res="240" label="240p">
</video>

<script>
// Optionally to override HTML native playback
videojs.options.hls.overrideNative = true;
videojs.options.html5.nativeAudioTracks = false;
videojs.options.html5.nativeTextTracks = false;

//Initialize videojs player
var player = videojs('myplayer',{},function(){ 
	this.nuevoPlugin({
		logo: "//domain.com/path/to/logo.png",
		logourl: "/domain.com"
	});
});
</script>


Same video fallback technique you can use for Mpeg-Dash stream.


For videojs version 6 you need to load videojs-contrib-hls plugin right after videojs loaded.

<script type=text/javascript" src="//domain.com/video-js/video.min.js"></script>
<script type=text/javascript" src="//domain.com/video-js/plugins/videojs-contrib-hls.min.js"></script>
<script type=text/javascript" src="//domain.com/video-js/nuevo.min.js"></script>


Quality resolutions button and menu is built-in Nuevo plugin feature and appears automatically if only HLS m3u8 playlist points to multiple different resolutions playlist variants.