Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
The <video> element allows you to embed video files directly in your HTML without requiring plugins. It provides built-in controls for playing, pausing, adjusting volume, and more.
Most compatible format. H.264 video codec with AAC audio.
type="video/mp4"✅ Universal support
Open format with VP8/VP9 codec. Better compression than MP4.
type="video/webm"⚠️ No Safari/IE support
Open format with Theora video codec. Good compression.
type="video/ogg"⚠️ Limited support
Various video configurations with Google Cloud Storage videos and subtitle support
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Video Element Examples</title>
</head>
<body>
<h2>🎬 Video Element Examples</h2>
<div class="video-container">
<h3>1. Basic Video Player</h3>
<video width="600" height="360" controls class="video-player" poster="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&fm=jpg">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<p class="info">✅ Click play to watch Big Buck Bunny - Professional animated short</p>
</div>
<div class="video-container">
<h3>2. Multiple Format Support</h3>
<video width="600" height="360" controls class="video-player" poster="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&fm=jpg">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4" type="video/mp4">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
Your browser does not support video playback.
</video>
<p class="info">🔄 Browser uses first supported format - MP4</p>
</div>
<div class="video-container">
<h3>3. Video with Subtitles</h3>
<video width="600" height="360" controls class="video-player" poster="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=800&fm=jpg">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
<track kind="subtitles" srclang="en" label="English" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A00:00:00.000 --> 00:00:03.000%0AEnable captions for subtitles%0A%0A00:00:03.000 --> 00:00:06.000%0AClick the CC button in the video player%0A%0A00:00:06.000 --> 00:00:09.000%0ASubtitles help translations of dialogue">
</video>
<p class="info">📝 Click CC button to enable subtitles - Subtitles show translations of dialogue</p>
</div>
<div class="video-container">
<h3>4. Autoplay & Loop (Muted)</h3>
<video width="600" height="360" autoplay muted loop class="video-player" poster="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800&fm=jpg">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4" type="video/mp4">
</video>
<p class="info">⚠️ Autoplay requires muted attribute for browsers to allow playback</p>
</div>
<div class="video-container">
<h3>5. Preload Strategies</h3>
<div>
<p class="label">preload="metadata" - Load only duration info</p>
<video width="600" height="360" controls preload="metadata" class="video-player" poster="https://picsum.photos/800/600.jpg">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4" type="video/mp4">
</video>
<p style="font-size: 0.85rem; color: #6b7280; margin-top: 0.5rem;">Faster initial load - only metadata is cached, video loads on play</p>
</div>
<div style="margin-top: 1.5rem;">
<p class="label">preload="auto" - Load entire video file</p>
<video width="600" height="360" controls preload="auto" class="video-player" poster="https://picsum.photos/seed/nature/800/600.jpg">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4" type="video/mp4">
</video>
<p style="font-size: 0.85rem; color: #6b7280; margin-top: 0.5rem;">Downloads entire video in background for instant playback</p>
</div>
</div>
<div class="video-container">
<h3>6. Video with Interactive Subtitles</h3>
<video width="600" height="360" controls class="video-player" poster="https://picsum.photos/seed/city/800/600.jpg">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4" type="video/mp4">
<track kind="subtitles" srclang="en" label="English" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A00:00:00.000 --> 00:00:02.000%0AAction sequence begins%0A%0A00:00:02.000 --> 00:00:04.000%0AHigh-intensity cinematic sequence%0A%0A00:00:04.000 --> 00:00:06.000%0AProfessional production quality%0A%0A00:00:06.000 --> 00:00:09.000%0AMultiple subtitle tracks available">
<track kind="captions" srclang="en" label="Captions" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A00:00:00.000 --> 00:00:02.000%0A[Music playing]%0AAction begins%0A%0A00:00:02.000 --> 00:00:04.000%0A[Sound effects]%0AIntense sequence%0A%0A00:00:04.000 --> 00:00:06.000%0A[Dramatic music]%0AFilm quality%0A%0A00:00:06.000 --> 00:00:09.000%0A[Ambient sound]%0AMultiple tracks">
</video>
<p class="info">🎥 Multiple track options - Both Subtitles and Captions available</p>
</div>
</body>
</html>Loading preview...
Create your own video player with subtitles!