Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do we specify that the audio/video will start playing as soon as it is ready in HTML?
The autoplay attribute in HTML specifies that audio or video content should start playing automatically as soon as it is ready, without requiring user interaction. This attribute is a boolean attribute that can be applied to both <audio> and <video> elements.
Syntax
Following is the syntax for the autoplay attribute −
<video autoplay>...</video> <audio autoplay>...</audio>
The autoplay attribute can also be written with an explicit value −
<video autoplay="autoplay">...</video>
Video Autoplay Example
Following example demonstrates how to use the autoplay attribute with a video element −
<!DOCTYPE html>
<html>
<head>
<title>Video Autoplay Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Video with Autoplay</h2>
<video width="400" height="300" controls autoplay muted>
<source src="/html5/sample-video.mp4" type="video/mp4">
<source src="/html5/sample-video.ogg" type="video/ogg">
Your browser does not support the video element.
</video>
</body>
</html>
The video will start playing automatically when the page loads. The muted attribute is included because many browsers require videos to be muted for autoplay to work.
Audio Autoplay Example
Following example shows how to implement autoplay with an audio element −
<!DOCTYPE html>
<html>
<head>
<title>Audio Autoplay Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Audio with Autoplay</h2>
<p>This audio will start playing automatically when the page loads:</p>
<audio controls autoplay>
<source src="/html5/sample-audio.mp3" type="audio/mpeg">
<source src="/html5/sample-audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</body>
</html>
The audio file will begin playing as soon as it has loaded enough data to start playback.
Browser Policy Considerations
Modern browsers have implemented autoplay policies to improve user experience and reduce unwanted media playback. These policies may prevent autoplay from working in certain situations:
-
Muted requirement − Most browsers allow autoplay only for muted videos. For videos with sound, user interaction is typically required.
-
User engagement − Some browsers track user engagement with a site and may allow autoplay on sites where the user has previously interacted with media.
-
Mobile restrictions − Mobile browsers often have stricter autoplay policies to conserve battery and data usage.
Autoplay with Muted Attribute
To ensure autoplay works across different browsers, combine the autoplay attribute with the muted attribute for videos −
<!DOCTYPE html>
<html>
<head>
<title>Autoplay with Muted</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Muted Autoplay Video</h2>
<p>This video will autoplay because it is muted:</p>
<video width="350" height="200" controls autoplay muted loop>
<source src="/html5/demo-video.mp4" type="video/mp4">
<source src="/html5/demo-video.webm" type="video/webm">
Your browser does not support the video element.
</video>
<p>Users can unmute the video using the controls if they want sound.</p>
</body>
</html>
The muted attribute ensures the video can autoplay, while loop makes it repeat continuously. Users can manually unmute the video if they want to hear the audio.
Additional Autoplay Attributes
The autoplay attribute works well with other media attributes −
| Attribute | Description |
|---|---|
| autoplay | Starts playback automatically when ready |
| muted | Starts playback without sound (helps with browser policies) |
| loop | Repeats the media continuously after it ends |
| preload | Specifies how much media data to load on page load |
| controls | Shows playback controls to the user |
Conclusion
The autoplay attribute enables automatic playback of audio and video content when the media is ready. Due to modern browser policies, videos typically need to be muted for autoplay to work reliably. Always consider user experience and provide controls for users to manage playback according to their preferences.
390 Views
