HTML Video Autoplay with Examples

HTML provides a simple way to embed videos on a webpage using the <video> tag. One common feature is autoplay, which allows videos to start playing automatically when the page loads. In this article, we'll explore how to use autoplay in HTML videos with examples.

What is Autoplay in HTML Video?

Autoplay is an attribute that makes a video start playing as soon as it is loaded on a webpage. It eliminates the need for user interaction (like clicking the play button).

Syntax:

<video src="video.mp4" autoplay></video>

This simple line of code ensures the video starts playing automatically.

Adding Autoplay to HTML Video

To autoplay a video, just add the autoplay attribute inside the <video> tag.

Example 1: Basic Autoplay

<video width="400" height="300" autoplay>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

In this example:

The video starts playing automatically when the page loads.
The <source> tag defines the video file.
A fallback message is displayed if the browser does not support the video.

Muted Autoplay (Recommended)

Many browsers block autoplay with sound to improve user experience. To ensure autoplay works, it's best to mute the video using the muted attribute.

Example 2: Autoplay with Mute

<video width="400" height="300" autoplay muted>
  <source src="video.mp4" type="video/mp4">
</video>

Adding muted ensures that the video plays automatically in all browsers.

Looping the Video with Autoplay

You can make the video play in a continuous loop using the loop attribute.

Example 3: Autoplay with Loop

<video width="400" height="300" autoplay muted loop>
  <source src="video.mp4" type="video/mp4">
</video>

The loop attribute restarts the video after it ends.

Controlling Autoplay with JavaScript

If you want more control over autoplay, you can use JavaScript.

Example 4: JavaScript-Controlled Autoplay

<video id="myVideo" width="400" height="300" muted>
  <source src="video.mp4" type="video/mp4">
</video>

<script>
  document.getElementById("myVideo").play();
</script>

This script ensures the video starts playing once the page loads.

Conclusion

Use autoplay to start videos automatically.
Add muted to ensure autoplay works in all browsers.
Use loop if you want continuous playback.
JavaScript can also be used for advanced autoplay control.

With these simple examples, you can easily implement autoplay videos on your website!

Happy coding! 🚀

HTML Video Autoplay with Examples