🎬 Audio & Video

Multimedia in HTML5

HTML5 Multimedia

HTML5 allows you to embed audio and video directly without plugins like Flash. This makes multimedia accessible across all modern browsers and devices.

💻 Video Element

<!-- Basic video -->
<video src="movie.mp4" controls></video>

<!-- Video with multiple sources -->
<video width="640" height="360" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    <source src="movie.ogg" type="video/ogg">
    Your browser doesn't support the video tag.
</video>

<!-- Video with poster (thumbnail) -->
<video width="640" height="360" controls poster="thumbnail.jpg">
    <source src="movie.mp4" type="video/mp4">
</video>

<!-- Autoplay and loop -->
<video controls autoplay loop muted>
    <source src="movie.mp4" type="video/mp4">
</video>

🔊 Audio Element

<!-- Basic audio -->
<audio src="song.mp3" controls></audio>

<!-- Audio with multiple sources -->
<audio controls>
    <source src="song.mp3" type="audio/mpeg">
    <source src="song.ogg" type="audio/ogg">
    <source src="song.wav" type="audio/wav">
    Your browser doesn't support the audio tag.
</audio>

<!-- Autoplay audio -->
<audio controls autoplay loop>
    <source src="background.mp3" type="audio/mpeg">
</audio>

🎨 Video Attributes

<video 
    width="800" 
    height="450"
    controls          <!-- Show controls -->
    autoplay          <!-- Start automatically -->
    loop              <!-- Replay when finished -->
    muted             <!-- Start muted -->
    poster="thumb.jpg" <!-- Show before playing -->
    preload="auto"    <!-- auto, metadata, or none -->
>
    <source src="movie.mp4" type="video/mp4">
</video>

<!-- Preload options -->
<!-- auto: Load entire video -->
<!-- metadata: Load only metadata -->
<!-- none: Don't preload anything -->

📝 Subtitles & Captions

<video controls>
    <source src="movie.mp4" type="video/mp4">
    
    <!-- English subtitles -->
    <track 
        kind="subtitles" 
        src="subtitles-en.vtt" 
        srclang="en" 
        label="English"
        default
    >
    
    <!-- Spanish subtitles -->
    <track 
        kind="subtitles" 
        src="subtitles-es.vtt" 
        srclang="es" 
        label="Español"
    >
</video>

🎮 JavaScript Control

<video id="myVideo" width="640" height="360">
    <source src="movie.mp4" type="video/mp4">
</video>

<button onclick="playVideo()">Play</button>
<button onclick="pauseVideo()">Pause</button>
<button onclick="changeSpeed()">Speed 2x</button>

<script>
    const video = document.getElementById('myVideo');
    
    function playVideo() {
        video.play();
    }
    
    function pauseVideo() {
        video.pause();
    }
    
    function changeSpeed() {
        video.playbackRate = 2.0;
    }
    
    // Volume control
    video.volume = 0.5; // 50%
    
    // Get current time
    console.log(video.currentTime);
    
    // Jump to 30 seconds
    video.currentTime = 30;
</script>

🎯 Key Takeaways