HTML Video Tutorial

Learn how to embed and control video content in your HTML pages

Introduction to HTML Video

The HTML <video> element allows you to embed video content directly in your web pages. It supports multiple video formats and provides built-in controls for playback.

Basic Syntax:

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

Basic Video Examples

1. Basic Video Player

The simplest way to embed a video with default controls.

<video controls width="600">
  <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video><video controls width="600">
  <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

2. Multiple Video Sources

Provide multiple formats for better browser compatibility.

<video controls width="600">
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
  <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  <source src="https://archive.org/download/ElephantsDream/ed_1024_512kb.ogv" type="video/ogg">
  Your browser does not support the video tag.
</video><video controls width="600">
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
  <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  <source src="https://archive.org/download/ElephantsDream/ed_1024_512kb.ogv" type="video/ogg">
  Your browser does not support the video tag.
</video>

3. Video with Poster Image

Show a preview image before the video plays.

<video controls width="600" poster="https://sample-videos.com/img/Sample-jpg-image-1mb.jpg">
  <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video><video controls width="600" poster="https://sample-videos.com/img/Sample-jpg-image-1mb.jpg">
  <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Video Attributes

Attribute	Description	Example
`controls`	Shows the default video controls (play/pause, volume, etc.)	`<video controls>`
`autoplay`	Video starts playing as soon as it's ready (may be blocked by browsers)	`<video autoplay>`
`loop`	Video will start over again when finished	`<video loop>`
`muted`	Video will be muted by default	`<video muted>`
`poster`	URL of an image to show while video is downloading	`<video poster="image.jpg">`
`preload`	Specifies if/how the video should be loaded when page loads (auto, metadata, none)	`<video preload="auto">`
`width`	Sets the width of the video player in pixels	`<video width="600">`
`height`	Sets the height of the video player in pixels	`<video height="400">`

Advanced Video Techniques

Custom Video Controls

Create your own controls using JavaScript instead of the default browser controls.

<!DOCTYPE html>
<html>
<head>
  <title>Custom Video Controls</title>
  <style>
    .video-controls {
      display: flex;
      gap: 8px;
      margin-top: 10px;
    }
    .video-controls button {
      padding: 8px 16px;
      background: #4f46e5;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <video id="custom-video" width="600" poster="https://sample-videos.com/img/Sample-jpg-image-1mb.jpg">
    <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  </video>
  
  <div class="video-controls">
    <button onclick="document.getElementById('custom-video').play()">Play</button>
    <button onclick="document.getElementById('custom-video').pause()">Pause</button>
    <button onclick="document.getElementById('custom-video').muted = !document.getElementById('custom-video').muted">
      Toggle Mute
    </button>
    <button onclick="document.getElementById('custom-video').requestFullscreen()">
      Fullscreen
    </button>
  </div>
</body>
</html><!DOCTYPE html>
<html>
<head>
  <title>Custom Video Controls</title>
  <style>
    .video-controls {
      display: flex;
      gap: 8px;
      margin-top: 10px;
    }
    .video-controls button {
      padding: 8px 16px;
      background: #4f46e5;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <video id="custom-video" width="600" poster="https://sample-videos.com/img/Sample-jpg-image-1mb.jpg">
    <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  </video>
  
  <div class="video-controls">
    <button onclick="document.getElementById('custom-video').play()">Play</button>
    <button onclick="document.getElementById('custom-video').pause()">Pause</button>
    <button onclick="document.getElementById('custom-video').muted = !document.getElementById('custom-video').muted">
      Toggle Mute
    </button>
    <button onclick="document.getElementById('custom-video').requestFullscreen()">
      Fullscreen
    </button>
  </div>
</body>
</html>

Video with Captions

Add subtitles/captions to your videos for accessibility.

Note: This example requires a WebVTT file for captions

<!DOCTYPE html>
<html>
<head>
  <title>Video with Captions</title>
</head>
<body>
  <video controls width="600">
    <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
    <track kind="subtitles" src="captions.vtt" srclang="en" label="English">
  </video>
</body>
</html><!DOCTYPE html>
<html>
<head>
  <title>Video with Captions</title>
</head>
<body>
  <video controls width="600">
    <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
    <track kind="subtitles" src="captions.vtt" srclang="en" label="English">
  </video>
</body>
</html>

Video Best Practices

Accessibility

Always provide controls for video playback
Include captions/subtitles for spoken content
Provide audio descriptions when needed
Don't autoplay videos with sound (it's often blocked anyway)
Ensure sufficient color contrast for any custom controls

Performance

Use MP4 format for broadest compatibility (H.264 codec)
Optimize video files (compression, appropriate resolution)
Use poster images for faster perceived loading
Consider lazy loading for videos below the fold
For large videos, consider streaming solutions

Browser Support

The HTML5 <video> element is supported in all modern browsers:

Browser	MP4	WebM	Ogg
Chrome	Yes	Yes	Yes
Firefox	Yes	Yes	Yes
Safari	Yes	Partial	No
Edge	Yes	Yes	Yes

Note: For widest compatibility, provide multiple formats (MP4 + WebM recommended).

< Previous Next >