HLS - HTTP Live Streaming
HLS means HTTP Live Streaming. It is an Adaptive Bitrate Streaming protocol developed and released by Apple in 2009. It works by detecting users's bandwith and CPU capicity in realtime and dynamically adjusting the quality of media streaming accordingly.
ABS adaptive bit rate and OBS the famous streaming software were developed and marketed in parallel during the explosion of global mobile devices from 2007 to 2017.
An HLS server would splits the video stream into small trunks of *.ts files which are pointing to an header.m3u8 . header.m3u8 would be updated in realtime by data from users devices. The size and bitrate of each trunk of *.ts HLS video file are adjusted basing on end users device bandwidth and CPU capacity.
After more than 10 years of its introduction, HLS is supported on all Mobile OS. However, if you want users to be able to display an HLS stream via a non-Safari browser like Chrome, Firefox and Edge then you will need implement a third-party Library on top of standard HTML5 player.
HTML5 Video Player
A standard HTML5 Video play .MOV, .MP4, .OGG and .WEBM file but not HLS stream .m3u8.
HTML5 player playing MOV file.
HTML5 player playing MP4 file.
HTML5 player playing OGG file.
HTML5 player playing WEBM file.
HTML5 player playing m3u8 stream.
We will test playing this HLS Stream on different players. There are several free and paid HLS player solutions available in the market.
FREE HLS.js with 53 Bugs and 11400 Likes and a Bugs/Likes ratio of 0.4737%.
CODE to display implement HLS.JS
async setupHLS(){
var streamURL = "https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_ts/master.m3u8";
var streamPlayer = document.getElementById("hlsjs_video");
if (streamPlayer !== null){
if (streamPlayer.canPlayType('application/vnd.apple.mpegurl')) {
streamPlayer.src = streamURL;
streamPlayer.play();
} else if(Hls.isSupported()){
var hls = new Hls();
hls.attachMedia(streamPlayer);
hls.on(Hls.Events.MEDIA_ATTACHED, function () {
hls.loadSource(streamURL);
hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
console.log("PARSED HLS Successfully");
console.log( 'manifest loaded, found ' + data.levels.length + ' quality level');
});
});
streamPlayer.play();
}
}
}
componentDidMount(){
this.setupHLS();
}
FREE VIDEO.JS 12 Bugs, 33400 Likes and a Bug/Like ratio of 0.0359%.
CODE to implement VideoJS
<video
id="my_video_1"
class="video-js vjs-default-skin"
width="60%" height="auto"
controls
preload="auto"
data-setup='{}'
>
<source src="https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_ts/master.m3u8"
type="application/x-mpegURL">
</video>
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
This example using older version of VIDEO.JS for live streaming called videojs-contrib-hls to able to render stream inside Markdown. Newer version called HTTP-Streaming will work only in pure HTML or React.
