First Principle: The Web is More Than Text and Images

The fundamental truth is that a webpage should be able to deliver any kind of content, not just static text and pictures. For years, this was a major problem. To play a video or audio file, browsers had to rely on third-party plugins like Adobe Flash, QuickTime, or Silverlight. This was inefficient, insecure, and inconsistent across different computers.

The Core Problem

How can we embed video and audio into a webpage in a standardized, native, and plugin-free way? We need a universal system that works on every modern browser, from a desktop PC to a mobile phone, without requiring the user to install anything extra.

The Logical Solution: The HTML5 <video> and <audio> Tags

The solution was to create dedicated HTML tags whose sole purpose is to embed and control media.

Part 1: The Basics - Getting a Video on the Page

The star of the show is the <video> tag. At its simplest, it just needs to know the source of the video file.

code Html

downloadcontent_copy

expand_less

<!-- This is the most basic implementation -->
<video src="my-awesome-video.mp4"></video>

The Problem We Immediately Face: If you put this on a page, you'll just see the first frame of the video as a static image. You can't play it, pause it, or change the volume. It's not a video player; it's just a video frame.

The Solution: We need to add player controls. The browser has a beautiful set of default controls built-in, and we can turn them on with a simple attribute.

The controls Attribute: The Magic Switch

The controls attribute is a boolean attribute. You don't need to set it to a value (controls="true" is unnecessary); its mere presence turns the feature on.

code Html

downloadcontent_copy