HTML video Tag

HTML <video> Tag: Embedding Videos in Web Pages

The <video> tag in HTML is used to embed videos in web pages. It supports multiple formats and provides built-in controls like play, pause, volume, and full screen.

1. Basic Syntax

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

✅ This will display a video player with built-in controls.

2. Attributes of the <video> Tag

Attribute	Description	Example
controls	Adds play, pause, volume, and fullscreen buttons	<video controls>
autoplay	Starts playing automatically when the page loads (muted in most browsers)	<video autoplay muted>
loop	Repeats the video indefinitely	<video loop>
muted	Starts muted	<video muted>
poster	Shows an image before the video plays	<video poster="thumbnail.jpg">
width / height	Sets the video size	<video width="500">
preload	Determines how the video is loaded: auto, metadata, or none	<video preload="metadata">

3. Example with Multiple Formats

<video controls width="600" poster="thumbnail.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

✅ This ensures compatibility across different browsers.

4. Example with Autoplay and Loop

<video autoplay loop muted>
  <source src="background-video.mp4" type="video/mp4">
</video>

✅ Useful for background videos on websites.

5. Styling the Video with CSS

<style>
  video {
    width: 100%;
    max-width: 800px;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  }
</style>

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

✅ Makes the video responsive and visually appealing.

6. JavaScript Control for <video>

You can control videos using JavaScript:

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

<button onclick="playVideo()">Play</button>
<button onclick="pauseVideo()">Pause</button>

<script>
  function playVideo() {
    document.getElementById("myVideo").play();
  }

  function pauseVideo() {
    document.getElementById("myVideo").pause();
  }
</script>

✅ Adds custom play and pause buttons.

7. Browser Compatibility

Browser	Supports <video>
Chrome	✅ Yes
Firefox	✅ Yes
Safari	✅ Yes
Edge	✅ Yes
Internet Explorer 11	⚠ Limited support

8. Conclusion

• The <video> tag makes it easy to embed videos in web pages.

• Supports multiple formats (.mp4, .webm, .ogg).

• Provides attributes like controls, autoplay, loop, and poster.

• It can be customized using CSS and controlled with JavaScript.