Back to Top

Video on Demand, Hands on

A VOD (Video On Demand) page is setup on a SafeSwissCloud virtual server and the components required are discussed in the article.

In this article we are going to make a web-based VOD (video on Demand) installation complete with a streaming server and an HTML5 player displaying an MPEG-DASH stream. In the past two articles (How to set up a reliable video streaming architecture & Video hosting in the cloud: More on Codecs and Streaming) the basics of video on the internet were explained. This time we will pull up our sleeves to install, configure and code the necessary components.

Before I describe what is involved and how it all works, here is the end-product: Demo 1. Have a look at the page and enjoy the short movie. I'll wait here till you come back.

The Server

The streaming server I have used is the Nimble Streamer from Softvelum. The license under which it is released allows me to install and use it free of charge. WMSPanel, the configuration panel for the streaming server, comes with a free 2 week trial period. Please refer to their web page for details.

The streaming server software can be downloaded onto a wide variety of servers. This particular installation on SafeSwissCloud is on an Ubuntu (ie a Linux) server. Downloading and installing it takes a few minutes. Configuring the server with WMSPanel takes a few more minutes. The important configuration parameter is the directory in which the media files are stored. The default setting was used for everything else. The streamer reponds on port 8081.

Once a media file (H.264-encoded, naturally, and with the extension .mp4) is placed in the configured directory I can ask Nimble to stream it with either MPEG-DASH or HLS protocol. As I had mentioned in the previous articles, both these protocols are based on HTTP. Nimble does the necessary 'trans-muxing'.

The client

The web page on which the video player is embedded is pretty basic HTML with a bit of CSS and Javascript thrown in. The Javascript is for setting up the video player. The HTML5 video player on the page is from BitMovin, as one can see with the watermark at the top right corner of the video player. I have obtained a key from the site and the license for the player (with that key) allows me to use it for up to 5'000 'impressions' per month free of charge.

The video player is given the URL to play and it passes this on to the streamer. The Nimble streamer sends chunks of the media file and the video player plays them. Before the buffer runs out the player gets the next chunk. Thus, the player displays the video without any breaks.

Network Traffic

To see the traffic to and from the browser feel free to use your favorite tool. One can use Wireshark or the web developer tool that is built into many browsers. On Chrome, Firefox and IE click on F12 to bring it up. Under network one will be able to see the packets that are sent back and forth. We will not discuss the standard web resources as that is not the focus of the article. The video streaming here happens with the MPEG-DASH protocol. At the beginning of the video you'll see a file named manifest.mpd being requested. After that at regular intervals files with the extension .m4s are requested from the streaming server. The first file is something like an index file. The subsequent files contain audio/video data encoded in H264 format for video and AAC for audio.

A Second Demo Page

The previous page had some text and a video player - a delberately simple page so that the VOD aspects are in plain sight. We will now extend it to include slides and notes that are synchronized with the video. A typical use-case is educational video where a lecturer has power-point slides. The video shows the lecturer (as a talking head) and next to it a powerpoint slide with the important points being discussed. The slides change as the lecture proceeds. We can add yet another piece of synchronized text for notes. Have a look at VOD Demo 2.

All the magic is done with Javascript: the code periodically requests the video player for the time code; the time code file says which slide has to be shown at a particular time. The Javascript simply brings those two together and displays the appropriate image file.

The videos used here

Due to copyright reasons, it is important that one does not step on anyone's toes in the pursuit of a blog article such as this one. Most video on the internet are copyrighted by someone and prohibit broadcasting without permission. The two videos that I used here are from the Blender project and can be broadcast freely. They are called Sintel and Big Buck Bunny, respectively.


If you would like to pull up your sleeves and make the same installation feel free to copy what I have done. Use the button on this page to contact me.


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <h2> <h3> <h4> <h5> <h6> <!--break--> <p> <div> <img>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.