HTML Video and Audio

HTML5 provides the <video> and <audio> elements to play multimedia without plugins.

Video Tag

<video src="video.mp4" controls width="600">
    Your browser does not support video.
</video>

Video Attributes

<video src="video.mp4" 
       controls 
       autoplay 
       loop 
       muted 
       poster="thumbnail.jpg"
       width="600" 
       height="400">
</video>

Audio Tag

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

Audio Attributes

<audio src="audio.mp3" controls autoplay loop muted>
</audio>

Source Element

<video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Your browser does not support video.
</video>

Case Study: Campus Video Gallery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Campus Video Gallery</title>
    <style>
        .video-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        .video-item {
            background: #f9fafb;
            border-radius: 8px;
            overflow: hidden;
        }

        .video-item video {
            width: 100%;
            display: block;
        }

        .video-info {
            padding: 15px;
        }

        .video-info h3 {
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <h1>Campus Video Gallery</h1>

    <div class="video-gallery">
        <div class="video-item">
            <video controls poster="video1-poster.jpg">
                <source src="campus-profile.mp4" type="video/mp4">
                Your browser does not support video.
            </video>
            <div class="video-info">
                <h3>Campus Profile</h3>
                <p>Profile video of Technology University</p>
            </div>
        </div>

        <div class="video-item">
            <video controls poster="video2-poster.jpg">
                <source src="graduation-2024.mp4" type="video/mp4">
                Your browser does not support video.
            </video>
            <div class="video-info">
                <h3>Graduation 2024</h3>
                <p>Odd semester graduation ceremony</p>
            </div>
        </div>
    </div>
</body>
</html>

Everyday Case Study

Case: A developer needs to display an audio player.

<h2>Campus Podcast</h2>

<div class="audio-player">
    <h3>Episode 1: Tips for Succeeding in College</h3>
    <audio controls>
        <source src="podcast-ep1.mp3" type="audio/mpeg">
        Your browser does not support audio.
    </audio>
</div>

<div class="audio-player">
    <h3>Episode 2: Career After Graduation</h3>
    <audio controls>
        <source src="podcast-ep2.mp3" type="audio/mpeg">
        Your browser does not support audio.
    </audio>
</div>

YouTube Embed

<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>

Best Practices

1. Multiple formats: Provide a fallback format
2. Poster image: For video before it plays
3. Controls: Always provide controls
4. Autoplay: Use it carefully
5. Accessibility: Provide captions/subtitles

Summary

HTML5 video and audio make it easy to embed multimedia. Provide multiple formats for browser compatibility.