HTML Video Autoplay - Scaler Topics

Overview

This article discusses video autoplay in HTML, including how to implement it, how to use it, and how to deal with the issues in different browsers. For a better understanding, we'll look at detailed code explanations as well as desired outcomes.

Prerequisites

Important to have: HTML Tags Nice to have: Video Tag and Audio Tag in HTML

Autoplay Attribute

The video autoplay feature in HTML is used to play an audio/video file automatically. The autoplay attribute is provided for HTML media components such as the audio and video tags.

Autoplay is a boolean attribute. When enabled, the audio/video will begin playing as soon as the web page is loaded and will continue to play.

Syntax:

How does Video Autoplay Work?

Imagine surfing the internet, accessing a webpage, and hearing a spontaneous noise or music. Of course, this will be problematic in terms of user experience. That's why, in most current browsers, video autoplay is enabled when:

The volume of the audio source is set to 0 or muted.
The video is set to mute.
The user has interacted with the site (by clicking, tapping, etc)

The user can re-enable the audio by clicking the unmute button in the controls, even if the video autoplay is originally muted.

Let us see the code to understand it better:

Explanation:

<video> tag used to insert a video to the webpage alongwith controls attribute to add controls to the video, width attribute to expand the video's size, and video autoplay in HTML is used to play the video automatically as soon as the page loads, originally set to muted.

<source> tag alongwith src attribute specifies the source or file path of the video to be displayed.

Type attribute specifies the type of the video as mp4, ogg or webm.

If the video is not viewable, a notice or text is added to be displayed on the webpage.

Note: To disable autoplay, autoplay=”false” will not work; the video will continue to autoplay if the attribute is there in the <video> tag. To stop video from autoplaying, the attribute must be removed altogether.

Looped Autoplay

When the loop attribute is used with autoplay feature in HTML, the video will continue to play indefinitely unless it is manually paused using controls.

Looped Autoplay Without Controls

If a video is going to be used as a silent animation on a website, we can take away the controls and set it to only autoplay and loop.

How to Fix Autoplay Not Working?

As discussed above, many popular browsers enable video autoplay in HTML to only function when the audio is muted or disabled to improve user experience. This makes the video less intrusive and prevents data consumption until the user voluntarily begins the download.

Since the autoplay attribute takes a boolean value, developers often attempt to utilize it as autoplay="true", however this only works if the video is muted or has no audio.

However, the video in the above examples still won’t autoplay on iOS Safari. Safari requires us to add an attribute called playsinline.

Note: Whenever possible, you should use the autoplay attribute instead of script, since script could lead to fallback content.

How to Autoplay a Video Using HTML5 in Chrome?

Although Chrome is a great browser, sometimes its extensive security measures end up conflicting with the code and result in undesired outcomes. For instance, chrome developers implemented a function that prevents videos from playing on websites if the sound is turned on. It will block it because it doesn’t want the user to hear an unwanted or unpleasant video.

Using the HTML5 video tag, adding a video with controls in looping autoplay mode might look something like this-

Chrome would not play the video because it was not muted as it does not want the sound to begin playing automatically when the user loads a webpage.

The answer is thus rather straightforward: the video must be muted so that Chrome will play it properly when the website is loaded. Add a muted attribute to the video like follows to mute it:

Autoplaying a Youtube Video

Youtube does not make its raw video files available; instead, it simply makes the video's unique id available. The video tag cannot be used since that id does not match with the actual file.

To embed a YouTube video on a webpage, use the <iframe> element. To make a YouTube video autoplay, add mute=1 after autoplay=1 to the video's source URL.

Styling Video Autoplay with CSS

To style video autoplay in HTML, different CSS elements can be used to extend the video's width and height, as well as to add a backdrop colour and blur it.

Here's an example:

Browser Compatibility

The video autoplay attribute in HTML is supported by various browsers:

Google Chrome 4.0 and above
Edge 9.0 and above
Firefox 3.5 and above
Internet Explorer 9.0
Opera 10.5 and above
Safari 3.1 and above

Note: The autoplay attribute renders differently in different browsers.

Conclusion

The video autoplay in HTML causes the video to start playing automatically as soon as the page loads.
For better user experience, modern browsers allow autoplay only with disabled audio or muted video.
To embed a autoplaying youtube video, use iframe tag instead of video tag.
This attribute is only present in HTML5.
Video autoplaying can be styled by using different CSS attributes.