Coding/Learn/html/audio video
HTML Beginner Course
01.Introduction to HTML
02.Anatomy of an HTML Element
03.The Sacred HTML5 Skeleton
04.Headings (h1 to h6)
05.Paragraphs, Line Breaks & Dividers
06.Text Formatting & Emphasis
07.Hyperlinks & Navigation (<a>)
08.Images & The Sacred Alt Text (<img>)
09.Ordered & Unordered Lists (<ul>, <ol>, <li>)
10.Block vs Inline Elements
11.Generic Containers (<div> & <span>)
12.Semantic HTML (<header>, <nav>, <main>, <footer>)
13.Tables (<table>, <tr>, <th>, <td>)
14.Native Audio & Video Elements
15.The Invisible Brain (<head> & Meta Tags)
16.Interactive Forms (<form>)
17.Input Types (<input>)
18.Accessible Labels & Submit Buttons
19.Textareas & Select Dropdowns (<textarea>, <select>)
20.Capstone: Building Your First Web Profile Page
Course Certificate0%

Complete all lessons to earn

LearnNative Audio & Video Elements
14 / 20 0%
Lesson 14 of 20
5 mins read

Native Audio & Video Elements

PreviousNext Lesson
In Plain English

Before HTML5, playing videos on the web required slow, battery-draining plugins like Adobe Flash. Today, HTML provides native <video> and <audio> tags with built-in play buttons, volume sliders, and full-screen modes.

The Mental Model

"<video controls> is like putting a built-in smart TV directly into your webpage wall. You supply the power cord (src) and the remote control (controls attribute), and the browser handles the rest."

Deep Dive: How It Works

<video controls>: The controls attribute enables the native browser play, pause, volume, and progress bar.

autoplay, loop, muted: Useful attributes for ambient background video headers (note: browsers block autoplay unless video is muted!).

<audio controls>: The exact same API as video, but specifically designed for podcasts, music tracks, and sound effects.

Fallbacks: Text placed inside <video>Your browser does not support video</video> is only shown if the browser is ancient.

Syntax Blueprint

<video src="demo.mp4" controls width="480">
  Your browser does not support HTML5 video.
</video>

Video container with source file, dimensions, and playback controls.

PointCore Rules to Remember

Point star
Controls Attribute: Always include the controls attribute so users can pause and adjust sound.
Point star
Autoplay Requires Muted: Browsers strictly forbid unmuted video autoplay to prevent annoying users.
Point star
Native MP4 & WebM: MP4 (H.264) and WebM formats are supported across all modern browsers.

Common Beginner Traps & How to Fix Them

Mistake:Forgetting the controls attribute

Why it happens: Writing <video src="clip.mp4"></video> results in a static frozen frame that users cannot click to play.

How to fix: Always include controls: <video src="clip.mp4" controls></video>.

Pro Tip: Use poster="thumbnail.jpg" to show a custom preview image before the user clicks play!

Live Interactive Example

Hit Run Code to see it live
Embedding Audio and Video
HTML5
1
2
3
4
5
6
7
8
9
Live Browser Preview
Click "Preview / Apply" to view the rendered output.
How it works: The browser automatically attaches native audio and video controls.

Your Turn: Micro Challenge

No pressure! Edit the starter code below and test your solution with instant feedback.

Micro Exercise

Create a video player with controls

  • PointWrite a <video> element with src="movie.mp4" and the controls attribute
1
2
Browser Preview & Output
Click "Check HTML" to test your solution.

Finished reading and practicing?

Mark this lesson as completed to update your course progress.

PreviousNext Lesson
Overview100 SheetLearnCertificates