Delivering mpeg-dash videos on the internet (full-stack)

In a previous post Prepare videos for adaptive bitrate streaming with ffmpeg, I wrote about how to prepare a video for adaptive bitrate streaming using ffmpeg and MP4Box.

This time, it will be about serving that video file on the internet and playing it on a web page.

Overview

Prerequisites:

A transcoded video file (see previous post)
Docker and docker-compose
Python

To keep things simple, we will do everything locally on a single machine. The video file will be served by a nginx docker container, and the web page will be served by a python http server. In a production environment, the nginx server corresponds to a CDN, and the python server corresponds to a web application server.

Directory structure

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


|-- compose.yml
|-- conf
|   `-- nginx.conf
|-- data
|   |-- playlist.mpd
|   |-- segment1.m4s
|   |-- segment2.m4s
|   |-- ...
|-- html
|   `-- index.html

Nginx configuration

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


# conf/nginx.conf

server {
    listen       80;
    listen  [::]:80;
    server_name  _;

    root /mnt/data;

    add_header 'Access-Control-Allow-Origin' 'http://localhost:8000' always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    add_header 'Access-Control-Allow-Headers' '*' always;
    add_header 'Access-Control-Allow-Methods' 'POST, GET, PUT, DELETE' always;
}

Notice that there’s nothing special about this nginx configuration, nothing related to mpeg-dash such as plugins. This is because mpeg-dash is just some divided video files plus a manifest file, and the frontend player will take care of fetching the individual files and playing them. The video server just needs to serve the files.

Docker compose file

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


# compose.yml

services:
  nginx-public:
    image: nginx:bookworm
    ports:
      - "8084:80"
    volumes:
      - ./data:/mnt/data
      - ./conf/nginx.conf:/etc/nginx/conf.d/default.conf

This will launch a nginx server on port 8084 serving the video files in the data directory.

Sample webpage

To test the playout, we can just use a simple html webpage that uses dash.js. It is a javascript library that can play mpeg-dash videos in a web browser, and it is what YouTube uses under the hood.

Conveniently dash.js provides a sample html page, so we just have to modify it a little bit to point to our video file.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


<!-- html/index.html -->

<!doctype html>
<html>
<head>
    <title>dash.js Rocks</title>
    <style>
        video {
            width: 640px;
            height: 360px;
        }
    </style>
</head>
<body>
<div>
    <video id="videoPlayer" controls></video>
</div>
<script src="yourPathToDash/dash.all.min.js"></script>
<script>
    (function () {
        var url = "localhost:8084/playlist.mpd";
        var player = dashjs.MediaPlayer().create();
        player.initialize(document.querySelector("#videoPlayer"), url, true);
    })();
</script>
</body>
</html>

Spin up everything

1
2


docker compose up -d
python -m http.server 8000 -d html

Now go to http://localhost:8000 and the video should be there.

Conclusion

The playout part of mpeg-dash was easier than I thought. As a web developer, I just had to serve the video files and use a javascript library to play them. Feels like the most difficult part is transcoding the video files, and fine-tuning the settings/options for smooth playback in different network conditions.

One concern with this approach is that there is no protection for the video file, so anyone with the URL can view it from anywhere on the internet. Combining with technique like Securely hosting static files with Nginx, we can add a layer of protection. I have just recently implemented that with a SvelteKit backend, so that might be a good topic for another post.