HLS Streaming Examples

Video Js player with Nuevo theme and plugin HLS streaming tests
Example #2 Example #3 Example #4 Example #5 Example #6 Example #7

HTTP Live Streaming (HLS) has become a de-facto standard for streaming video on mobile devices thanks to its native support on iOS and Android.
videojs-contrib-hls plugin for video js player 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 (see the docs folder) for info
  • Media content in fragmented MP4s instead of the MPEG2-TS container format.
Example above is default m3u8 audio stream example from video js website and video URL is:
https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8
You can also find multiple other different HLS streaming examples with stream from different sources.
All using Video Js player with theme and plugin by Nuevolab.com.

Below you can find player setup code sample with videojs-contrib-hls plugin included.

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

<video id="myplayer" class="video-js vjs-default-skin" poster="/cover.jpg" controls preload="auto">
  <source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL">
</video>

<script>
var player = videojs('myplayer',nuevo,function(){ 
	this.nuevoPlugin({
		plugin options here,
	});
});
</script>


Download videojs-contrib-hls and include it in your page alongside video.js as in example above.