Web Development Journey👩💻👨💻
💻 Day 16: HTML Multimedia 🎵🎥
👋 Hello everyone! Welcome back to Day 16 of our HTML journey. 🙌
Today we're going to make our webpages more powerful by adding:
🎵 HTML Audio & 🎥 HTML Video
Have you ever watched a video or listened to music directly on a webpage?
You can do that with HTML! 🚀
🎵 Part 1: HTML Audio
🤔 What is HTML Audio?
The <audio> element is used to add sound or music to a webpage.
🌍 Best Analogy 😍👇👇
Think of a music player 🎧.
You choose a song and press:
▶️ Play
⏸️ Pause
🔊 Volume
HTML can create a similar audio player on your webpage.
📝 Basic Syntax
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
🧐 Understanding the Code
① <audio>
Creates an audio player.
<audio>
</audio>
② controls
This attribute displays controls such as:
▶️ Play
⏸️ Pause
🔊 Volume
<audio controls>
③ <source>
Specifies the audio file.
<source src="song.mp3" type="audio/mpeg">
Here:
src → location of the audio file
type → tells the browser the file type
🎵 Complete Example
<h2>My Favorite Song</h2>
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
🎥 Part 2: HTML Video
🤔 What is HTML Video?
The <video> element is used to display video content directly on a webpage.
🌍 Best Analogy 😍👇👇
Think about YouTube. ▶️
You click a video and see controls for:
▶️ Play
⏸️ Pause
🔊 Volume
⛶ Full screen
HTML's <video> element can provide similar basic video controls.
📝 Basic Syntax
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
🧐 Understanding the Code
① <video>
Creates a video player.
<video>
</video>
② controls
Displays the video controls.
<video controls>
③ <source>
Specifies the video file.
<source src="video.mp4" type="video/mp4">
📏 Setting Video Size
You can set the width of the video:
<video controls width="500">
<source src="video.mp4" type="video/mp4">
</video>
🎥 Complete Example
<h2>My Introduction Video</h2>
<video controls width="500">
<source src="intro.mp4" type="video/mp4">
</video>
💻 Mini Coding Challenge 🚀
Create a webpage containing:
🎵 A heading: "My Favorite Audio"
🎵 An audio player with controls
🎥 A heading: "My Favorite Video"
🎥 A video player with controls and a width of 500px
Try writing the code yourself and share on comment!! 💪🔥
Have a wonderful day! 😍❤️
@AbWebDeveloper
2 · 216 ·