04. Audio Video
Introduction
Section titled “Introduction”HTML5 provides native <audio> and <video> elements for embedding multimedia content without requiring plugins. These elements offer built-in controls, support multiple formats, and provide better accessibility than plugin-based solutions. Understanding how to use audio and video elements is essential for modern web development.
Audio Element
Section titled “Audio Element”Basic Usage
Section titled “Basic Usage”<audio src="audio.mp3" controls></audio>With Multiple Sources
Section titled “With Multiple Sources”<audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> Your browser does not support the audio element.</audio>Attributes
Section titled “Attributes”<audio src="audio.mp3" controls autoplay loop muted preload="auto"></audio>Video Element
Section titled “Video Element”Basic Usage
Section titled “Basic Usage”<video src="video.mp4" controls width="640" height="360"></video>With Multiple Sources
Section titled “With Multiple Sources”<video controls width="640" height="360"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> Your browser does not support the video element.</video>Attributes
Section titled “Attributes”<video src="video.mp4" controls autoplay loop muted poster="poster.jpg" width="640" height="360"></video>Common Attributes
Section titled “Common Attributes”- controls: Show playback controls
- autoplay: Start automatically
- loop: Repeat playback
- muted: Start muted
- preload: Loading strategy
- poster: Video thumbnail (video only)
Best Practices
Section titled “Best Practices”Include Fallback Text
Section titled “Include Fallback Text”<video controls> <source src="video.mp4" type="video/mp4"> <p>Your browser does not support HTML5 video.</p></video>Provide Multiple Formats
Section titled “Provide Multiple Formats”<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"></video>