Today, I am going to show you guys how to play mp4 video using hls.js. hls.js is a JavaScript library which implements a HTTP Live Streaming client. It relies on HTML5 video and MediaSource Extensions for playback. What is great about hls.js is that it does not need any player, it works directly on top of a standard HTML <video> element. (assuming your browser supported it, check here). So, how does hls.js works? It works by breaking the overall stream into a sequence of small HTTP-based file downloads, each download loading one short chunk of an overall stream. As the stream is played, it will continue on requesting more short chunk of the overall stream. And, how does it know what file name it should download? Since, initially, the video will be load from a m3u8 file where it contains the metadata of the video itself. You may think it as a playlist. By simply looking at them, hls.js would know which file should download next while playing. Couple of the advantages of using HLS is that it works faster than Flash, it is supported by many browser these days, and it unlocks the potential to stream live in 4k and 60 fps. This is an example of how a m3u8 file would look like.

sample m3u8 file when the video is named sample.mp4

  #EXTM3U
  #EXT-X-VERSION:3
  #EXT-X-TARGETDURATION:11
  #EXT-X-MEDIA-SEQUENCE:0
  #EXTINF:10.023222,
  sample0.ts
  #EXTINF:10.000000,
  sample1.ts
  #EXTINF:10.000000,
  sample2.ts
  #EXTINF:10.000000,
  sample3.ts
  #EXTINF:10.000000,
  sample4.ts
  #EXTINF:10.000000,
  sample5.ts
  #EXTINF:10.000000,
  sample6.ts
  #EXTINF:10.000000,
  sample7.ts
  #EXTINF:10.000000,
  sample8.ts
  #EXTINF:7.800000,
  sample9.ts
  #EXT-X-ENDLIST

source code hosted on GitHub

As you can see, the first chunk of the overall stream is sample0.ts and follow by sample1.ts. In this way, hls.js would know which ts file to be played next. Now, before we dive right into the code. We first need to convert the mp4 video to m3u8 format in order to use the HLS technologies. There are many great tools that can do this. We are going to use the command line with ffmpeg by ffmpeg. And, I will be using ffmpeg in command line to convert the video from mp4 to m3u8. If you do not have ffmpeg installed, please go to this StackOverflow thread for more instruction on how to install on Ubuntu. Say, I have a mp4 video file named sample.mp4 and I would like to name my m3u8 file as sample.m3u8. Then, I may simply do this command to convert the mp4 video to m3u8 format.

command on how to convert mp4 video to m3u8 format using ffmpeg

    ffmpeg -i sample.mp4 -profile:v baseline -level 3.0 -s 840x560 -start_number 0 -hls_list_size 0 -f hls sample.m3u8

source code hosted on GitHub

Notice that I set the resolution of video to 840x560. Please refer to this site if you are interested in other size. When you hit the ENTER button, it should begin for conversion and it might look something similar like this.

Converting to m3u8 from mp4

Wait for it to be finished (it might take some time depends on the size of your video and machine specs). When it is done, you should see bunch of ts file like sample0.ts, sample1.ts, and sample.m3u8. This means that you have successfully convert your mp4 file to m3u8 format. Now, when we have all these. We can dive right into how to use hls.js to play m3u8 file. We first need to include the hls.js from the CDN.

Including hls.js library code from jsdelivr CDN

    <script src="//cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>

Now, we need to add the <div> element with video as id so that the JavaScript would know where to put the video.

Adding div element with video as id with controls

  <video id="video" controls></video>

Then, we need to write the JavaScript code that use the hls.js library to play the video.

Play m3u8 playlist using hls.js library

  <script type="text/javascript">
    var video = document.getElementById("video");
    var videoSrcHls = "https://www.jenrenalcare.com/upload/poanchen.github.io/sample-code/2016/11/17/how-to-play-mp4-video-using-hls/sample.m3u8";

    if(Hls.isSupported()) {
      var hls = new Hls();
      hls.loadSource(videoSrcHls);
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED,function() {
        video.play();
      });
    }
  </script>

In the code, we first check if the browser is HLS supported, then we initialize the Hls instance, and load it with the path where you put your m3u8 file. Later, we simply play the video. So that, when user comes to the site, the video will be automatically played. However, what happen when the browser does not support HLS? We should do this as fallback as it is a good practice.

Added the fallback when user’s browser does not support HLS

  <script type="text/javascript">
    var video = document.getElementById("video");
    var videoSrcInHls = "https://www.jenrenalcare.com/upload/poanchen.github.io/sample-code/2016/11/17/how-to-play-mp4-video-using-hls/sample.m3u8";
    var videoSrcInMp4 = "https://www.jenrenalcare.com/upload/poanchen.github.io/sample-code/2016/11/17/how-to-play-mp4-video-using-hls/sample.mp4";

    if(Hls.isSupported()) {
      var hls = new Hls();
      hls.loadSource(videoSrcInHls);
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED,function() {
        video.play();
      });
    }else{
      addSourceToVideo(video, videoSrcInMp4, 'video/mp4');
      video.play();
    }

    function addSourceToVideo(element, src, type) {
      var source = document.createElement('source');
      source.src = src;
      source.type = type;
      element.appendChild(source);
    }
  </script>

Now, even if the browser happen to not support hls, user may still be able to watch the video. If you would like to see the live demo, please visit here. If you would like to download the audio files, please visit here.

Full code for playM3u8UsingHlsJs.html

  <script src="//cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
  <video id="video" controls></video>

  <script type="text/javascript">
    var video = document.getElementById("video");
    var videoSrcInHls = "https://www.jenrenalcare.com/upload/poanchen.github.io/sample-code/2016/11/17/how-to-play-mp4-video-using-hls/sample.m3u8";
    var videoSrcInMp4 = "https://www.jenrenalcare.com/upload/poanchen.github.io/sample-code/2016/11/17/how-to-play-mp4-video-using-hls/sample.mp4";

    if(Hls.isSupported()) {
      var hls = new Hls();
      hls.loadSource(videoSrcInHls);
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED,function() {
        video.play();
      });
    }else{
      addSourceToVideo(video, videoSrcInMp4, 'video/mp4');
      video.play();
    }

    function addSourceToVideo(element, src, type) {
      var source = document.createElement('source');
      source.src = src;
      source.type = type;
      element.appendChild(source);
    }
  </script>

source code hosted on GitHub

Wrapping Up

Hopefully this guide has given you the confidence to play around with hls.js. I hope that this tutorial has helped you and thank you for reading!

Resources

I’ll try to keep this list current and up to date. If you know of a great resource you’d like to share or notice a broken link, please let us know.

Getting started