HTML
Audio and Video
Add music, sound effects, and video content to web pages using HTML's built-in media elements.
Remember when websites were just text and images? Those days are long gone. Today's web pulses with audio tracks, video tutorials, and interactive media. Alex wants to add a demo reel to their portfolio and background music to create atmosphere. HTML gives us two powerful tags for media: <audio> and <video>. Think of them like media players built right into your webpage. No external plugins needed.The Audio Element
The <audio> tag embeds sound files directly into your webpage. Just like an image shows a picture, audio plays a sound file when the user clicks play.<!-- Background music for Alex's creative portfolio -->
<audio src="ambient-music.mp3" controls>
Your browser doesn't support audio playback.
</audio>
<!-- Audio with multiple format options -->
<audio controls>
<source src="portfolio-intro.mp3" type="audio/mpeg">
<source src="portfolio-intro.ogg" type="audio/ogg">
Audio not supported in this browser.
</audio>What just happened?
The browser created audio players with play/pause buttons, volume controls, and progress bars. The controls attribute adds these interactive elements automatically. Try this: remove controls to hide the player interface completely.
Audio Attributes
Audio elements accept several attributes that control playback behavior:controls
Shows play/pause buttons and volume slider
autoplay
Starts playing automatically (often blocked)
loop
Repeats the audio when it finishes
muted
Starts with sound turned off
The Video Element
The <video> tag works similarly to audio but displays moving pictures with sound. Perfect for Alex's portfolio demo reel or client testimonials.<!-- Alex's portfolio demo reel -->
<video width="640" height="360" controls>
<source src="portfolio-demo.mp4" type="video/mp4">
<source src="portfolio-demo.webm" type="video/webm">
Your browser doesn't support video playback.
</video>
<!-- Video with poster image -->
<video width="400" height="300" controls poster="video-thumbnail.jpg">
<source src="client-testimonial.mp4" type="video/mp4">
Video not supported.
</video>What just happened?
The browser created video players with full controls including timeline scrubbing, fullscreen options, and volume adjustment. The width and height attributes set the display size. Try this: add autoplay muted to see how videos can start playing silently.
Video Attributes
Videos support all audio attributes plus some video-specific ones:Multiple Source Files
Different browsers support different media formats. Safari loves MP4, Firefox prefers WebM. The <source> tag lets you provide multiple file formats so every visitor can enjoy your content.<!-- Audio with fallback formats -->
<audio controls>
<source src="soundtrack.mp3" type="audio/mpeg">
<source src="soundtrack.ogg" type="audio/ogg">
<source src="soundtrack.wav" type="audio/wav">
<p>Your browser doesn't support audio.
<a href="soundtrack.mp3">Download the file</a> instead.</p>
</audio>
<!-- Video with multiple qualities -->
<video width="500" height="280" controls>
<source src="demo-hd.mp4" type="video/mp4" media="(min-width: 800px)">
<source src="demo-mobile.mp4" type="video/mp4">
<track kind="subtitles" src="demo-captions.vtt" srclang="en" label="English">
</video>Autoplay Warning
Most browsers block autoplay unless the video is muted. Users must interact with the page first. Always include muted with autoplay to avoid console errors.
Media Best Practices
Building great media experiences requires more than just dropping in files. File sizes matter enormously. A 50MB video kills mobile users' data plans and takes forever to load.Good Media Practice
- Compress files before uploading
- Provide multiple format options
- Include descriptive fallback text
- Set reasonable dimensions
Poor Media Practice
- Upload raw 4K video files
- Only provide one file format
- No fallback for unsupported browsers
- Autoplay without muted attribute
File Size Guidelines
Keep your media files reasonable to ensure fast loading across all connections:Audio: Under 5MB for music tracks, under 1MB for sound effects. Use MP3 at 128kbps for good quality-to-size ratio.
Video: Under 10MB for short clips, under 50MB for longer content. Compress to 720p for web unless 4K quality is essential.
Complete Portfolio Media Section
Let's build a complete media showcase for Alex's portfolio that demonstrates both audio and video integration:<!-- Alex's complete portfolio media showcase -->
<section>
<h2>My Creative Work</h2>
<!-- Portfolio demo video -->
<h3>Portfolio Walkthrough</h3>
<video width="640" height="360" controls poster="demo-thumbnail.jpg">
<source src="portfolio-demo.mp4" type="video/mp4">
<source src="portfolio-demo.webm" type="video/webm">
<p>Watch my <a href="portfolio-demo.mp4">portfolio walkthrough video</a></p>
</video>
<!-- Background music -->
<h3>Ambient Soundtrack</h3>
<audio controls loop>
<source src="creative-ambient.mp3" type="audio/mpeg">
<source src="creative-ambient.ogg" type="audio/ogg">
<p>Listen to my <a href="creative-ambient.mp3">ambient soundtrack</a></p>
</audio>
</section>What just happened?
We created a professional media showcase with video and audio players. The video shows a poster thumbnail until clicked, while the audio includes loop to repeat continuously. Both provide fallback links for unsupported browsers. Try this: add preload="none" to prevent any downloading until the user clicks play.
Quiz
Which attribute adds play/pause buttons and volume controls to audio and video elements?
Alex wants to provide both MP4 and WebM versions of a video for maximum browser compatibility. Which tag should they use inside the <video> element?
Why might the autoplay attribute not work as expected on a website?
Iframes and Embeds
Embed external content like YouTube videos, Google Maps, and social media posts directly into your web pages.