Videojs HLS Adaptive Streaming with quality resolution picker
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 the desktop and on mobile devices thanks to its native support on iOS and Android.
Video example above is a HLS adaptive bitrate streaming based on m3u8 manifest file. Nuevo plugin for videojs has built quality selection menu. A quality button appears automatically if only m3u8 playlist includes information about resolution variants.
Resolution picker does not work on iOS devices, since iOS allows only native HLS streaming which is outside of control (iOS is missing Media Source Extension). Resolution picker by Nuevodevel allows to switch into any static resolution available and back to Auto mode. In Auto mode, it allows to see resolution changes in real time when the player is resized (eg. to fullscreen) or internet speed changes significantly.
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.
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/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('myplayer');
player.nuevo()
</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+ (only native streaming, without quality switch option)
Windows Phone – Supported on Windows Phone 8+
If you intend to use with Credentials Access-Control requests, best is to load source programmtcially, like in the example below:
Code snippet
player.src({ src: "//path-to-hls-playlist.m3u8", type="application/x-mpegURL", withCredentials: true});
HTTP Live Streaming (HLS) has become a de-facto standard for streaming video on the desktop and on mobile devices thanks to its native support on iOS and Android.Video example above is aadaptive bitrate streaming based onmanifest file. Nuevo plugin for videojs has built quality selection menu. A quality button appears automatically if only m3u8 playlist includes information about resolution variants.Resolution picker does not work on iOS devices, since iOS allows only native HLS streaming which is outside of control (iOS is missing Media Source Extension). Resolution picker by Nuevodevel allows to switch into any static resolution available and back to Auto mode. In Auto mode, it allows to see resolution changes in real time when the player is resized (eg. to fullscreen) or internet speed changes significantly.If you intend to use with Credentials Access-Control requests, best is to load source programmtcially, like in the example below:
