HTML Media

Overview

HTML provides multiple ways to embed and play multimedia content in webpages, including audio, video, and other media formats. HTML5 introduced native <audio> and <video> elements, making it much simpler to add media content to webpages.

Video

Basic Video Element

Use the <video> tag to embed video:

<video src="movie.mp4" controls>
    Your browser does not support the video tag.
</video>

Video Attributes

<video 
    src="movie.mp4" 
    width="640" 
    height="360"
    controls
    autoplay
    loop
    muted
    poster="thumbnail.jpg">
    Your browser does not support the video tag.
</video>

Common attributes:

• controls - Display playback controls
• autoplay - Auto-play
• loop - Loop playback
• muted - Mute audio
• poster - Video thumbnail
• preload - Preload strategy (none/metadata/auto)
• width and height - Video dimensions

Multiple Format Support

To ensure cross-browser compatibility, provide multiple video formats:

<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 does not support the video tag.
</video>

Audio

Basic Audio Element

Use the <audio> tag to embed audio:

<audio src="music.mp3" controls>
    Your browser does not support the audio tag.
</audio>

Audio Attributes

<audio 
    src="music.mp3" 
    controls
    autoplay
    loop
    muted
    preload="auto">
    Your browser does not support the audio tag.
</audio>

Multiple Format Audio

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

Media Formats

Video Formats

Format	MIME Type	Browser Support
MP4	video/mp4	Widely supported
WebM	video/webm	Chrome, Firefox, Opera
Ogg	video/ogg	Firefox, Opera

Audio Formats

Format	MIME Type	Browser Support
MP3	audio/mpeg	Widely supported
Ogg	audio/ogg	Firefox, Opera
WAV	audio/wav	Widely supported

Embedding YouTube Videos

Use iframe to embed YouTube videos:

<iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/VIDEO_ID" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen>
</iframe>

Responsive Media

Responsive Video

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
    <video 
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
        controls>
        <source src="movie.mp4" type="video/mp4">
    </video>
</div>

CSS Styling

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.video-container video,
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

<div class="video-container">
    <video controls>
        <source src="movie.mp4" type="video/mp4">
    </video>
</div>

JavaScript Control

Video 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="changeVolume()">Volume</button>

<script>
    var video = document.getElementById("myVideo");
    
    function playVideo() {
        video.play();
    }
    
    function pauseVideo() {
        video.pause();
    }
    
    function changeVolume() {
        video.volume = 0.5; // 50% volume
    }
</script>

Audio Control

<audio id="myAudio">
    <source src="music.mp3" type="audio/mpeg">
</audio>

<button onclick="playAudio()">Play</button>
<button onclick="pauseAudio()">Pause</button>

<script>
    var audio = document.getElementById("myAudio");
    
    function playAudio() {
        audio.play();
    }
    
    function pauseAudio() {
        audio.pause();
    }
</script>

Media Events

Common media events:

<video id="myVideo" controls>
    <source src="movie.mp4" type="video/mp4">
</video>

<script>
    var video = document.getElementById("myVideo");
    
    video.addEventListener("play", function() {
        console.log("Video started playing");
    });
    
    video.addEventListener("pause", function() {
        console.log("Video paused");
    });
    
    video.addEventListener("ended", function() {
        console.log("Video playback ended");
    });
    
    video.addEventListener("timeupdate", function() {
        console.log("Current time: " + video.currentTime);
    });
</script>

Subtitles and Tracks

Use the <track> element to add subtitles:

<video controls>
    <source src="movie.mp4" type="video/mp4">
    <track 
        kind="subtitles" 
        src="subtitles_en.vtt" 
        srclang="en" 
        label="English"
        default>
    <track 
        kind="subtitles" 
        src="subtitles_zh.vtt" 
        srclang="zh" 
        label="Chinese">
</video>

Best Practices

1. Provide multiple formats to ensure cross-browser compatibility
2. Use poster attribute to provide video thumbnails
3. Avoid autoplay, especially with sound
4. Optimize file size to improve loading speed
5. Provide fallback content for unsupported browsers
6. Use appropriate preload strategy
7. Consider mobile devices bandwidth and performance

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Media Example</title>
    <style>
        .media-container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
        }
        
        video, audio {
            width: 100%;
            max-width: 640px;
            display: block;
            margin: 20px 0;
        }
        
        .controls {
            margin: 10px 0;
        }
        
        button {
            padding: 10px 20px;
            margin: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="media-container">
        <h1>Video Player</h1>
        <video id="myVideo" controls poster="thumbnail.jpg">
            <source src="movie.mp4" type="video/mp4">
            <source src="movie.webm" type="video/webm">
            Your browser does not support the video tag.
        </video>
        
        <div class="controls">
            <button onclick="document.getElementById('myVideo').play()">Play</button>
            <button onclick="document.getElementById('myVideo').pause()">Pause</button>
            <button onclick="document.getElementById('myVideo').currentTime = 0">Reset</button>
        </div>
        
        <h1>Audio Player</h1>
        <audio controls>
            <source src="music.mp3" type="audio/mpeg">
            <source src="music.ogg" type="audio/ogg">
            Your browser does not support the audio tag.
        </audio>
    </div>
</body>
</html>

Summary

HTML5 media elements provide powerful multimedia support for webpages. By properly using <video> and <audio> tags, combined with JavaScript and CSS, you can create rich media experiences. Remember to consider browser compatibility, performance optimization, and user experience.