MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Welcome back! In the previous lesson, you learned how to embed and optimize images on your website.
Now, imagine this historical fact:
Back in the early 2000s, when your parents and teachers were in school, playing a video or an MP3 song on a website was a total headache! Users had to download and install bloated third-party plugins like Adobe Flash Player or RealPlayer. These plugins constantly crashed computers, drained laptop batteries, and created security hazards.
Then, in 2014, HTML5 arrived and changed the internet forever!
HTML5 introduced two revolutionary, built-in tags:
<video> — For playing movies, animated clips, and video lectures.<audio> — For playing music, morning prayers, and educational podcasts.Suddenly, every modern device — from a school computer lab PC to an Android phone or iPhone — could play videos natively with zero plugins! Let's learn how to use them like a pro.
<video> Element 🎥The <video> tag allows you to embed a video player directly inside your webpage:
controls 🎮If you embed a <video> tag without the controls attribute, the video will appear as a frozen first frame! The user will have no play button, no pause button, no volume slider, and no seek bar!
Always remember to include controls:
<video> Tag 🎛️| Attribute | Type | What It Does |
|---|---|---|
controls | Boolean | Displays playback buttons (Play, Pause, Volume, Fullscreen, Seek bar). |
poster | URL | Displays a thumbnail image (like YouTube) before the user clicks play! |
width & height | Pixels | Sets the exact display dimensions of the video player. |
autoplay | Boolean | Starts playing the video automatically when the page loads. |
muted | Boolean | Mutes all sound (Turns volume to 0). |
loop | Boolean | Restarts the video automatically from the beginning when it finishes. |
preload | Choice | Tells the browser how much video to download in advance (auto, metadata, or none). |
muted is Mandatory! 🤫Have you ever opened a website late at night while studying, and suddenly a loud advertisement started blasting through your speakers, waking up your entire family?
To protect users from loud embarrassing noises, modern browsers (Chrome, Safari, Edge) have a strict law:
autoplay, you must also write muted:poster Attribute 🖼️Instead of showing a black screen or an awkward frozen video frame before the user clicks play, you can show a crisp thumbnail photo using the poster attribute:
When visitors open your page, they see thumbnail-robotics.jpg with a clean play button centered on top!
<audio> Element (Podcasts & Music) 🎧The <audio> tag works almost identically to <video>, but renders a slim horizontal sound player:
<audio> in School Projects:<source> 🔄Different web browsers historically preferred different video file formats:
.mp4): The world's #1 most popular format. Works on 100% of all devices (computers, iPhones, Androids)..webm): Modern open-source format developed by Google with excellent compression.By providing multiple <source> tags inside your <video> or <audio> container, the browser automatically picks the best one it supports:
<track> Tag 💬Have you ever watched an educational video on YouTube with English or Hindi subtitles turned on?
Subtitles help:
HTML5 provides the <track> tag for subtitles using the WebVTT format (.vtt):
When you add <track>, a small [CC] (Closed Captions) button automatically appears on your video player!
controls attributeIf you don't write controls, users have no way to start or pause the media!
autoplay without mutedRemember: Browsers will automatically block unmuted autoplay to protect users' ears.
Always include a friendly note between <video>...</video> so users on older browsers know what went wrong.
<video> and <audio> elements, completely replacing old third-party plugins like Flash.controls attribute so users can play, pause, seek, and adjust the volume.poster="image.jpg" to display a YouTube-style thumbnail before the video plays.muted if you want a video to autoplay.<source> tag inside <video> or <audio> to provide multiple file formats (like MP4 and WebM).<track> tag with .vtt files to provide accessible subtitles and closed captions.Test your understanding with these multiple-choice questions:
controls attribute from an HTML5 <video> tag?muted attribute when setting a video to autoplay?<video> to add subtitles or closed captions?Open VS Code and create a file named school-media-hub.html.
Create an "Online School Learning & Cultural Media Hub":
<video> player with controls, a width of 640px, and a height of 360px.poster image representing the lecture thumbnail.<source> tags: an MP4 file and a WebM file.<track>.<audio controls> player below the video.<video autoplay muted loop> with a width of 100%.Congratulations! You have completed Chapter 10: Media! You now know how to enrich your web applications with beautiful responsive images, podcasts, and native video lectures!
In the next lesson, we will continue your web development journey with Iframes & Web Embeds (Media).
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
| Previous Lesson | Next Lesson |
|---|---|
| Images & Responsive Art | Iframes & Web Embeds |
Test your understanding of this lesson with 5 questions. Each question has one correct answer.