HTML5 Video

Overview

The HTML5 <video> element provides a standard way to embed video in webpages without relying on third-party plugins (like Flash).

Basic Syntax

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

Video Attributes

Common Attributes

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

Attributes:

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

Multiple Format Support

Provide multiple video formats for cross-browser compatibility:

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

Video Formats

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

JavaScript Control

Basic Control

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

<button onclick="document.getElementById('myVideo').play()">Play</button>
<button onclick="document.getElementById('myVideo').pause()">Pause</button>

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

Video Events

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

Responsive Video

<style>
    .video-wrapper {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
        height: 0;
        overflow: hidden;
    }
    
    .video-wrapper video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>

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

Subtitles Support

<video width="640" height="360" 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 for cross-browser compatibility
2. Use poster attribute for video thumbnails
3. Optimize file size for faster loading
4. Avoid autoplay unless necessary and muted
5. Provide subtitles for accessibility
6. Responsive design for different screen sizes
7. Provide fallback content for unsupported browsers

Summary

HTML5 Video element provides a powerful and flexible solution for video playback on webpages. By properly using its attributes and JavaScript API, you can create feature-rich video experiences.