Video in your Web Application

Vikas K Solegaonkar
5 min readOct 23, 2023

Gone are the days when our web applications were limited to text content, enriched by some colors and fonts. Today’s websites must include rich video and audio content — in order to appeal to the modern user — within a couple of seconds.

YouTube can provide you all the video streaming solutions you need — at a minimal cost and extreme scale. However, techies like to make things on their own — for the fun — to learn and understand the technology that goes into building such applications. If you are one of them, do come along as we dig into the core concepts and nitty-gritties of what goes into displaying video on a website.

Foremost, we need to host our web application on some backend. And what is better than AWS S3/CloudFront for hosting static content? All the examples below will use the same.

The Primitive

Once we have the CDN setup, life is just a play of HTML, CSS and JavaScript running in your browser. The most primitive solution comes with the video tag in HTML5. All you need is a simple HTML file containing the video tag, referencing the MP4 file lying back on your CDN.

<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="relative.path.to.the.video.mp4" type="video/mp4">
</video>
</body>
</html>

This will display the video on the page. It will ensure the width and height of the output is restricted, and also provide the necessary controls to let the user play around with it.

If you have a decent network connection and the video is small enough, it will work without any problem — leaving us wondering why do we need anything beyond this?

Smooth Streaming

To understand this, choose a large video — few hours long. Try the above approach to show this video on your website. This will take some time to load, even on a high-speed network.

That is because, by default, CloudFront treats your MP4 video as an ordinary file, and sends it across as an ordinary file. That means, the browser has to receive the entire MP4 file on the network before it can start playing the video. This can be a long time if the video is large.

--

--