How to setup video on demand with HLS

Updated: at 09:12 AM

Table of contents

Open Table of contents

What is HLS?

Learn about how HLS works

Benefits of Using HLS

Step by Step to Setup VoD with HLS

To have a video distribution system using hls, you need 2 things:

  1. A server so the client can get the ts file(Nginx)
  2. A server that help you upload video and spilt them to ts files

Prerequisites and usage

Step 1: Install nginx and ffmpeg

  1. Update the system:

    sudo apt update
sudo apt upgrade -y

  2. Install the necessary dependencies:

    sudo apt install build-essential

  3. Install Nginx:

     sudo apt install nginx

  4. Install ffmpeg

    sudo apt install ffmpeg

Step 2: Configure Nginx web server for hls files

  1. Create file your_domain.conf in nginx etc/nginx/conf.d with follow content:

    nano /etc/nginx/conf.d/your_domain.conf
    server {
  listen 80;
  server_name your_domain;

  location /hls/ {
      alias /path/file/hls;
      types {
          application/vnd.apple.mpegurl m3u8;
          video/mp2t ts;
      }
      add_header 'Access-Control-Allow-Origin' '*' always;
      add_header 'Access-Control-Allow-Headers' 'Range' always;
      add_header 'Cache-Control' 'no-cache' always;
      add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
      try_files $uri $uri/index.m3u8;
  }
}

  2. Restart nginx:

    nano systemctl restart nginx

Step 3: Convert video to hls

  1. Get video to test:

    curl -o BigBuckBunny.mp4 http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4

  2. Use ffmpeg to convert file mp4 to hls

    ffmpeg -i BigBuckBunny.mp4 -codec: copy -hls_time 1 -hls_list_size 0 -f hls /path/file/hls/filename.m3u8

    Wait done, you can see file ts in your path folder.

  3. Create an HTML5 Video Player:

    To play the HLS video, you need an HTML5 video player that supports HLS. One of the most popular options is the Video.js player with the videojs-contrib-hls plugin.

       <!DOCTYPE html>
   <html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="robots" content="noindex">
      <title>Live CDN</title>
      <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.3.0/video-js.min.css" rel="stylesheet">
   </head>
   <body style="background:#000;color:#fff;">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.3.0/video.min.js"></script>
      <div class="video-container">
         <video
            id="my-player"
            class="video-js"
            muted
            controls
            preload="auto"
            poster=""
            data-setup='{}'
            style="position:fixed;right:0;bottom:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:fill;"
         >
            <source id="video-source" type="application/x-mpegURL" src="https://your_domain/hls/4892603c8a/index.m3u8">
            </source>
            <p class="vjs-no-js">
               To view this video please enable JavaScript, and consider upgrading to a
               web browser that
               <a href="https://videojs.com/html5-video-support/" target="_blank">
                  supports HTML5 video
               </a>
            </p>
         </video>
      </div>
      <script>
         var player = videojs('my-player');
      </script>
   </body>
   </html>

Step 4: Test Your Setup

Once everything is set up, test your HLS stream on different devices and network conditions to ensure it works seamlessly.