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
HTML DOM Video autoplay Property
The HTML DOM Video autoplay property sets or returns a boolean value that determines whether the video element will automatically start playing when the page loads. This property corresponds to the HTML autoplay attribute on the video element.
Syntax
Following is the syntax for getting the autoplay property value −
mediaObject.autoplay
Following is the syntax for setting the autoplay property −
mediaObject.autoplay = booleanValue
Parameters
The booleanValue parameter can be one of the following −
| Value | Description |
|---|---|
| true | The video will automatically play when the page loads |
| false | The video will not automatically play when the page loads (default) |
Return Value
The property returns a boolean value − true if autoplay is enabled, false if it is disabled.
Example − Setting Autoplay Property
Following example demonstrates how to set and modify the autoplay property of a video element −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video autoplay Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Video Autoplay Property Demo</h2>
<video id="myVideo" width="320" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br><br>
<button onclick="enableAutoplay()">Enable Autoplay</button>
<button onclick="disableAutoplay()">Disable Autoplay</button>
<button onclick="checkAutoplay()">Check Autoplay Status</button>
<p id="result"></p>
<script>
var video = document.getElementById("myVideo");
var result = document.getElementById("result");
function enableAutoplay() {
video.autoplay = true;
result.innerHTML = "Autoplay enabled: " + video.autoplay;
}
function disableAutoplay() {
video.autoplay = false;
result.innerHTML = "Autoplay disabled: " + video.autoplay;
}
function checkAutoplay() {
result.innerHTML = "Current autoplay status: " + video.autoplay;
}
</script>
</body>
</html>
The output shows a video player with buttons to control the autoplay property. The status is displayed below the buttons −
[Video Player with Controls] [Enable Autoplay] [Disable Autoplay] [Check Autoplay Status] Current autoplay status: false
Example − Autoplay with Page Load
Following example shows how to set autoplay when the page loads and then toggle it −
<!DOCTYPE html>
<html>
<head>
<title>Video Autoplay on Page Load</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Autoplay Control Example</h2>
<video id="demoVideo" width="320" controls muted>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br><br>
<button onclick="toggleAutoplay()">Toggle Autoplay</button>
<div id="status"></div>
<script>
var video = document.getElementById("demoVideo");
var status = document.getElementById("status");
// Set autoplay to true when page loads
video.autoplay = true;
updateStatus();
function toggleAutoplay() {
video.autoplay = !video.autoplay;
video.load(); // Reload video to apply autoplay change
updateStatus();
}
function updateStatus() {
status.innerHTML = "<p>Autoplay is currently: <strong>" +
(video.autoplay ? "ENABLED" : "DISABLED") + "</strong></p>";
}
</script>
</body>
</html>
The video starts with autoplay enabled, and clicking the toggle button switches between enabled and disabled states −
[Video Player - starts playing automatically] [Toggle Autoplay] Autoplay is currently: ENABLED
Key Points
-
The autoplay property only affects the next time the video loads, not the currently playing video.
-
Many modern browsers require the
mutedattribute for autoplay to work due to autoplay policies. -
Use
video.load()after changing the autoplay property to reload the video with new settings. -
The property returns the current autoplay setting, not whether the video is currently playing.
Browser Compatibility
The Video autoplay property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. However, autoplay behavior may be restricted by browser autoplay policies that require user interaction or muted audio.
Conclusion
The HTML DOM Video autoplay property provides programmatic control over whether a video automatically plays when loaded. Use this property to dynamically enable or disable autoplay based on user preferences or application logic, keeping in mind modern browser autoplay restrictions.
252 Views
