Step-by-Step Guide to Video Tag in HTML with Examples

Fallback text for unsupported browsers

Text between the opening and closing video tags serves a vital purpose. Users with browsers that don't support HTML5 video element will see this message instead of a broken element:

<video controls width="320" height="240">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support HTML video. 
  Here is a <a href="movie.mp4">link to the video</a> instead.
</video>

Output

This creates a better user experience. Modern browser users see the video player while others get a helpful message with other ways to access the content. Download links in the fallback text ensure everyone can watch the video regardless of their browser.

Syntax of video tag in HTML with example

You can implement the video tag in HTML in two ways:

1. Simple implementation with direct src attribute:

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

2. Implementation with multiple source elements:

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

Output

The second method works better for cross-browser compatibility. Both methods need specific attributes:

• width and height attributes set the video player dimensions
• controls attribute adds playback controls like play, pause, and volume
• type attribute in source elements shows the video's MIME type

Adding the type attribute helps browsers determine playability without downloading the file first. This improves page load speed.

Here's a complete example with all essential features:

<video width="640" height="360" controls poster="thumbnail.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogg" type="video/ogg">
  <p>Your browser cannot play this video. Download the 
    <a href="movie.mp4">MP4 version</a> instead.</p>
</video>

Output

This example shows sizing, controls, a poster image, multiple format sources, and fallback content. It creates a resilient implementation that works well across browsers and devices.

HTML video tags become powerful through their attributes. These attributes work like control switches that determine video behavior, appearance, and function on your webpage. Let's get into these attributes and understand how they can boost your video implementation.

controls, autoplay, loop, muted

You can fine-tune embedded videos with several boolean attributes that change the user experience:

controls: This attribute shows video playback buttons including play, pause, volume, and fullscreen options. It's available to users and provides them with simple interaction capabilities:

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

autoplay: The browser starts video playback right after loading. Modern browsers limit this feature to protect user experience:

<video autoplay muted>
  <source src="movie.mp4" type="video/mp4">
</video>

The muted attribute is needed because Chromium browsers only allow autoplay for muted videos.

loop: Your video will restart after it ends with this attribute. Background videos or short demonstrations work well with this feature.

muted: This attribute turns off audio output by default. Users can turn sound back on if controls are present.

poster and preload explained

poster: This shows an image before video playback starts. Browsers display the first frame once it's ready if you don't specify a poster:

<video poster="thumbnail.jpg" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

A poster image gives users a preview and makes your page look better initially.

preload: Browsers get hints about how much video content to buffer before playback:

• preload="auto" - Download the entire video
• preload="metadata" - Load only simple information (size, duration, etc.)
• preload="none" - Load nothing until the user starts playback

Browsers might ignore these suggestions based on network conditions or user priorities. The preload attribute doesn't work when autoplay is present.

width and height attributes

Video player dimensions play a significant role in page layout:

<video width="800" height="450" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

These attributes set video player dimensions in pixels. Both attributes matter because they:

1. Save space during page loading
2. Stop page layout from shifting as video loads
3. Keep proper aspect ratios

CSS can control video dimensions for responsive designs. You can set width to a percentage and height to "auto":

<video width="100%" height="auto" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

src and type attributes

src: This points to the video file location in two ways:

1. On the video tag:

<video src="movie.mp4" controls></video>

2. Inside source elements (better for browser compatibility):

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

The src value works with absolute URLs (other websites) or relative URLs (files on your website).

type: Browsers learn the video format before downloading:

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

Output

This attribute helps browsers skip downloading formats they can't support.

video tag attributes vs audio tag attributes

HTML <audio> and <video> tags share multimedia attributes:

Both use: controls, autoplay, loop, muted, preload, and src attributes.

The differences are:

• <video> uses width, height, and poster attributes; <audio> doesn't
• <video> shows visual content while <audio> plays sound only
• Both tags support <source> elements for multiple formats

These attributes give you control over multimedia content on your webpages. The right combination creates engaging, accessible, and responsive video experiences for users on devices of all sizes.

Making videos work in different browsers can be tricky for web developers. Not all browsers play the same video formats. This means we need multiple formats when using the HTML video tag. Let's look at how to use this key technique in our projects.

Using multiple <source> tags for compatibility

The video element really works best with multiple <source> tags. This setup makes sure videos play smoothly whatever browser your visitors use:

<video controls poster="thumbnail.jpg" width="620">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
  <p>
    Sorry, your browser doesn't support embedded videos.  
    You can <a href="video.mp4">download the MP4</a> and watch it with your favorite video player.
  </p>
</video>

Output

The browser checks each source one by one until it finds a format it can play. If the first source doesn't work - maybe because the format isn't supported or the URL is wrong - the browser tries the next one. This continues until it finds something that works.

The browser only sends one error message after trying all sources, not one for each <source> element. Users will always have access to content this way, no matter what their browser supports.

We can add extra encoding details for specific video formats using the codecs parameter:

<source src="video.webm" type="video/webm; codecs='vp8, vorbis'">

Browsers use this extra info to make smart choices about playback without downloading files they can't use.

Supported formats: MP4, WebM, Ogg

HTML5 works with three main video formats:

1. MP4 (MPEG-4): This format works almost everywhere - on all browsers and devices. MP4 files usually combine H.264 video with AAC audio compression. They give great quality without huge file sizes, which makes them perfect for websites and mobile devices.

2. WebM: Google, Mozilla, and Opera created this format just for the web. WebM uses VP8 or VP9 for video and Vorbis or Opus for audio. Modern browsers love this open-source format because it streams so well.

3. Ogg (Theora): This open-source format doesn't need licensing fees and uses Theora for video with Vorbis audio. While not as popular as MP4, Ogg is great for open-source projects that want to avoid licensing issues.

The best approach is to offer multiple formats. Most developers put MP4 first since it works everywhere, then WebM, and finally Ogg as a backup plan.

Browser support comparison table

Here's how different browsers handle each format:

MP4 works on every major browser. WebM has great support too, except on older browsers. All but one of these browsers support Ogg - Safari is the exception.

This support pattern shows why we still need multiple formats to give users the best experience. MP4 might work everywhere, but WebM can perform better in some browsers. It's also a nice option for users who prefer open-source tech.

Multiple video formats with nested <source> elements are a core part of good HTML5 video. This approach helps you reach the widest audience while getting the best performance from each browser.

Let's explore some working examples of HTML video implementation. These code snippets show real-life applications you can adapt to your projects.

Responsive video with CSS

Modern websites need videos that adapt to different screen sizes. The simplest way to create responsive videos is to set the width attribute as a percentage:

<video width="100%" height="auto" controls>
  <source src="video.mp4" type="video/mp4">
</video

Output

CSS provides better solutions to maintain proper aspect ratios. This technique uses the max-width property effectively:

.video-container {
  max-width: 100%;
  margin: 0 auto;
}
.video-container video {
  width: 100%;
  height: auto;
}

This approach keeps videos from getting bigger than their container while letting them shrink as needed.

Autoplay and loop video example

Videos that play automatically and repeat need both autoplay and loop attributes:

<video autoplay loop muted controls="false">
  <source src="example.mp4" type="video/mp4">
</video>

Output

Most browsers need the muted attribute to make autoplay work. The loop attribute makes your video restart after it ends. This setup works great for background videos or short demos.

Poster image before video loads

A poster attribute lets you show a custom thumbnail while your video loads:

<video controls poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

‍Output

Browsers usually show a black screen or first frame without a poster image. A well-designed poster image makes the initial look better and shows users what to expect.

HTML video code with fallback text

Your code should have fallback content for browsers that can't play HTML5 video:

<video width="620" controls poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg" aria-label="Elephants Dream animated short film">
  <source src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4" type="video/mp4">
  <source src="https://archive.org/download/ElephantsDream/ed_hd.avi" type="video/avi">
  Sorry, your browser doesn't support embedded videos.  
  You can 
  <a href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4" download="ed_1024_512kb.mp4">
    download the MP4
  </a> and watch it locally.
</video>

Output

This detailed example has multiple sources, a poster image, and fallback text with a download link. The fallback text shows up only if a browser can't display the video. This ensures all users can access your content whatever their browser capabilities.

JavaScript gives developers the ability to control HTML videos beyond static attributes. You can create custom video players with improved functionality using just a few lines of code.

Play and pause using JS

The play() and pause() methods in JavaScript let you control video playback directly. These methods give you programmatic control over video start and stop:

const video = document.getElementById('myVideo');

// Play the video
function playVideo() {
  video.play();
}

// Pause the video
function pauseVideo() {
  video.pause();
}

// Toggle play/pause
function togglePlayPause() {
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
}

This toggle function works great for custom play/pause buttons that change states based on the video's status.

Change video size dynamically

You can resize videos while they run to look good on different screen sizes:

// Set specific dimensions
function resizeVideo(width, height) {
  const video = document.getElementById('myVideo');
  video.width = width;
  video.height = height;
}

// Make video responsive to window size
window.addEventListener('resize', function() {
  const video = document.getElementById('myVideo');
  video.style.width = '100%';
  video.style.height = 'auto';
});

CSS properties combined with JavaScript create the best results for responsive videos.

Volume control with JavaScript

The volume property works with values from 0.0 (silent) to 1.0 (maximum volume):

const video = document.getElementById('myVideo');
const volumeSlider = document.getElementById('volumeControl');

// Set original volume
video.volume = 0.5; // 50% volume

// Update volume based on slider
volumeSlider.addEventListener('input', function() {
  video.volume = this.value / 100;
});

Your code should handle both 'input' and 'change' events to work well across browsers.

Event handling: onended, onplay

Video elements trigger various events during playback that you can monitor:

const video = document.getElementById('myVideo');

// Play event
video.addEventListener('play', function() {
  console.log('Video started playing');
});

// Ended event
video.addEventListener('ended', function() {
  console.log('Video playback completed');
  // Perform actions when video ends
});

The 'ended' event won't trigger if the loop attribute is true. This lets you create specific behaviors based on the playback state.

JavaScript provides many more video properties and events. You can build complex custom video players with these tools.

Creating videos that everyone can watch is a core requirement when working with HTML media elements. Building content that works for all users helps everyone, not just people with disabilities.

Adding subtitles using <track>

The <track> element adds essential text tracks to HTML videos. It improves accessibility by providing subtitles, captions, and descriptions:

<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <track src="captions_file.vtt" label="English" kind="captions" srclang="en" default>
  <track src="French_captions_file.vtt" label="French" kind="subtitles" srclang="fr">
  Sorry, your browser does not support the video tag.
</video>

Output

Here are the attributes for <track>:

• src: URL location of the caption file
• label: title shown in the caption menu
• kind: type of time-aligned text (captions/subtitles/chapters/descriptions/metadata)
• srclang: language code for the text
• default: shows which track to enable by default

Text tracks use the WebVTT format (.vtt files). This format lets you position and style text with precise timing. Note that captions help hearing-impaired users while subtitles translate content for those who understand the language.

Optimizing video size and quality

The right video optimization leads to smooth playback on all devices:

4. Choose appropriate resolution: 1280×720 works well for most web videos
5. Adjust Constant Rate Factor: Values from 23-28 give high-quality results with smaller files
6. Reduce frame rate: Changing from 60fps to 30fps can significantly reduce file size
7. Remove audio when unnecessary: Videos replacing GIFs don't need audio tracks

Compressing videos while maintaining quality prevents playback problems. Videos that are smaller load faster and buffer less often. This directly enhances the viewer's experience.

Using preload and poster effectively

The preload attribute tells browsers how to buffer videos:

<video preload="none" poster="thumbnail.jpg" controls>
  <source src="video.mp4" type="video/mp4">
</video>

Output

Preload has three options:

• none: stops loading until users start playback
• metadata: loads only basic info like duration
• auto: lets the browser decide how much to load

You'll get the best performance by using preload="none" for videos that need user interaction. You can load metadata when users hover their mouse:

<video preload="none" poster="thumbnail.jpg" 
  onmouseenter="event.target.setAttribute('preload','metadata')">
  <source src="video.mp4" type="video/mp4">
</video>

The poster attribute stops blank screens during loading. It makes the initial view better and can serve as LCP content when optimized properly.

Explain audio and video tag in HTML

The <audio> and <video> elements share many attributes and features:

<audio controls>
  <source src="audio.mp3" type="audio/mp3">
  <source src="audio.ogg" type="audio/ogg">
</audio>

Output

These elements both support controls, autoplay, loop, muted, and preload attributes.

Here's what makes them different:

• <video> supports width, height, and poster attributes; <audio> doesn't
• <audio> works with just three file formats: MP3, WAV, and OGG
• <video> shows visual content while <audio> plays sound only

Both elements can use the <track> element to make content accessible through transcriptions and subtitles.

This piece takes a deep dive into the HTML video tag - its attributes, how to implement it, and the best ways to use it. You've learned to embed videos directly into web pages without third-party plugins. The native approach gives you better control, faster performance, and works well across browsers and devices.

The video tag needs more than just placing content on a page. Your videos will work everywhere when you provide multiple format options through nested <source> elements. MP4 remains the most accessible format, while WebM and Ogg play key roles in creating universal video experiences.

Video content must be accessible to everyone. Adding subtitles with the <track> element, smaller file sizes, and proper controls make videos usable for all users, whatever their abilities or tech limitations might be.

JavaScript makes videos even better. You can build custom players, control playback with code, and handle various events during playback. This code control turns basic video elements into interactive parts of your web apps.

The responsive methods we covered help videos adapt naturally to any screen size. Users get the best viewing experience on their desktops, tablets, or phones.

The HTML video tag shows how web standards have grown to support rich media natively. The days of buggy plugins and compatibility issues are gone. Modern browsers now handle videos predictably and simply.

The video tag should be your go-to tool to engage your audience in web projects. Videos grab attention, share information quickly, and create lasting impressions that text alone can't match.

Getting good at using the HTML video tag lets you turn regular websites into dynamic multimedia experiences. With both basic and advanced techniques under your belt, you can now add video content that works perfectly for everyone who visits your site.

Master the HTML video tag to create engaging multimedia experiences without plugins, supporting multiple formats for universal browser compatibility.

• Use multiple <source> elements with MP4, WebM, and Ogg formats to ensure videos play across all browsers and devices

 • Include essential attributes like controls, poster, and preload="none" for optimal user experience and performance 

• Add <track> elements with WebVTT files to provide subtitles and captions for accessibility compliance 

• Implement responsive design with CSS width: 100% and height: auto to adapt videos to different screen sizes

• Always include fallback text between video tags for browsers that don't support HTML5 video elements

The HTML video tag represents a fundamental shift from plugin-dependent multimedia to native web standards. By combining proper syntax, multiple format support, accessibility features, and responsive design, you can create professional video implementations that work seamlessly across all modern browsers and devices.

Q1. What is the basic structure of the HTML video tag?

The basic structure includes an opening tag, optional elements for multiple formats, and a closing tag. It's recommended to use nested elements for better browser compatibility.

Q2. How can I make my HTML video responsive? 

To make a video responsive, set the width attribute to 100% and height to auto. You can also use CSS with max-width property to maintain proper aspect ratios across different screen sizes.

Q3. What are the key attributes for controlling video behavior? 

Important attributes include controls (for playback buttons), autoplay (to start playing immediately), loop (to restart after ending), and muted (to silence audio by default). The poster attribute specifies a thumbnail image to display before playback begins.

Q4. How do I add subtitles or captions to my HTML video? 

Use the element within the video tag to add subtitles or captions. Specify the source file (in WebVTT format), language, and kind (e.g., captions, subtitles) using appropriate attributes.

Q5. Can I control video playback using JavaScript? 

Yes, JavaScript allows extensive control over video playback. You can use methods like play() and pause(), adjust volume, handle events like 'ended' and 'play', and even create custom video players with enhanced functionality.