CODE WITH FAHIM

HTML Audio & Video

🎵 HTML <audio> Tag:

The tag in HTML is used to embed sound files — like songs, podcasts, background sound effects, or even voice messages — directly into your web page.

Basic syntax:

<audio controls>
<source src="music.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Explanation:

I. <audio> — main tag.
II. controls — shows play, pause, and volume buttons.
III. <source> — tells the browser where the file is.

IV. Fallback text — shown if browser can’t play the file.

🎧 Supported audio formats:

MP3 → audio/mpeg
OGG → audio/ogg
WAV → audio/wav

Let's hear a scary sound using the <audio> tag:

Output:

🌐Browser Support:

The <audio> tag is part of HTML5, and all modern browsers support it:

Browser Supported Since Works Smoothly

Browser	Supported since
✅ Google Chrome	4.0+
✅ Mozilla Firefox	3.5+
✅ Microsoft Edge	9.0+
✅ Safari	4.0+
✅ Opera	10.5+
✅ Mobile Browsers	iOS Safari, Chrome for Android, Samsung Internet, etc.

So yeah — every major browser supports <audio> these days.

🎥 HTML <video> Tag:

The <video> tag in HTML5 is used to embed videos directly in a webpage — no need for Flash or third-party players (thank goodness 😅).

Basic syntax:

<video width="640" height="360" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag. </video>

Explanation:

i.<video> → The container that holds the video.

ii.width & height → Set the display size of the video.

iii.controls → Adds built-in controls (play, pause, volume, fullscreen).

iv.<source> → Specifies the file and its format.

Fallback text → Appears if the browser doesn’t support video.

Now,let's implement the code to watch a video.

<video width="640" height="360" controls></video>
<source src="tajmahal.mp4 type="mp4"> Your browser doesn’t support video tag(Fallback text)
</video>

Output:

🎬 Supported Video Formats:

MP4=( Chrome,Safari,Firefox,Opera)
WebM=( Chrome,Firefox,Opera)
OGG=( Chrome,Safari,Firefox,Opera)

🪄 Common Attributes Between Audio & Video Tag:

Attribute	Description	Example
Controls	Adds play/pause/volume bar	<video controls>
autoplay	Starts playing automatically (muted required)	<video autoplay>
loop	Repeats automatically	<video loop>
muted	Starts muted	<video muted