Video in your Web Application

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>

Video in your Web Application

The Primitive

Written by Vikas K Solegaonkar