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 loop Property
The HTML DOM Video loop property controls whether a video element will automatically restart from the beginning when it reaches the end. This property returns a boolean value and can be set to true or false.
Syntax
Following is the syntax for getting the loop property value −
mediaObject.loop
Following is the syntax for setting the loop property −
mediaObject.loop = booleanValue
Parameters
The booleanValue can be one of the following −
| Value | Description |
|---|---|
true |
The video will automatically restart from the beginning when it ends |
false |
The video will stop playing when it reaches the end (default behavior) |
Return Value
The property returns a boolean value − true if the video is set to loop, false otherwise.
Example − Getting Loop Status
Following example shows how to check if a video element has looping enabled −
<!DOCTYPE html>
<html>
<head>
<title>Video Loop Property - Get Status</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Check Video Loop Status</h3>
<video id="myVideo" width="320" controls>
<source src="/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br><br>
<button onclick="checkLoop()">Check Loop Status</button>
<p id="result"></p>
<script>
function checkLoop() {
var video = document.getElementById("myVideo");
var loopStatus = video.loop;
document.getElementById("result").innerHTML =
"Video loop is currently: " + (loopStatus ? "Enabled" : "Disabled");
}
</script>
</body>
</html>
The output shows the current loop status of the video −
Video loop is currently: Disabled
Example − Enabling Video Loop
Following example demonstrates how to enable looping for a video element −
<!DOCTYPE html>
<html>
<head>
<title>Enable Video Loop</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Enable Video Looping</h3>
<video id="loopVideo" width="320" controls>
<source src="/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br><br>
<button onclick="enableLoop()">Enable Loop</button>
<button onclick="disableLoop()">Disable Loop</button>
<p id="status">Loop Status: Disabled</p>
<script>
var video = document.getElementById("loopVideo");
function enableLoop() {
video.loop = true;
updateStatus();
}
function disableLoop() {
video.loop = false;
updateStatus();
}
function updateStatus() {
var statusText = video.loop ? "Enabled" : "Disabled";
document.getElementById("status").innerHTML = "Loop Status: " + statusText;
}
</script>
</body>
</html>
When you click "Enable Loop", the video will restart automatically when it ends. The status updates accordingly −
Loop Status: Enabled
Example − Toggle Loop with HTML Attribute
Following example shows how the loop property corresponds to the HTML loop attribute −
<!DOCTYPE html>
<html>
<head>
<title>Video Loop Attribute vs Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Loop Attribute vs Property</h3>
<h4>Video with loop attribute:</h4>
<video id="video1" width="280" controls loop>
<source src="/html/mov_bbb.mp4" type="video/mp4">
</video>
<h4>Video without loop attribute:</h4>
<video id="video2" width="280" controls>
<source src="/html/mov_bbb.mp4" type="video/mp4">
</video>
<br>
<button onclick="checkBoth()">Check Both Videos</button>
<div id="results" style="margin-top: 10px;"></div>
<script>
function checkBoth() {
var video1 = document.getElementById("video1");
var video2 = document.getElementById("video2");
var result1 = "Video 1 (with loop attribute): " + video1.loop;
var result2 = "Video 2 (without loop attribute): " + video2.loop;
document.getElementById("results").innerHTML =
"<p>" + result1 + "</p><p>" + result2 + "</p>";
}
</script>
</body>
</html>
The output shows how the HTML loop attribute affects the DOM property −
Video 1 (with loop attribute): true Video 2 (without loop attribute): false
Common Use Cases
The loop property is commonly used in the following scenarios −
Background videos − For decorative videos that should play continuously
Short animations − For brief video clips that enhance user experience when repeated
Product demonstrations − For showcasing features in a continuous loop
Video wallpapers − For creating ambient video backgrounds
Browser Compatibility
The loop property is supported in all modern browsers that support the HTML5 video element, including Chrome, Firefox, Safari, Edge, and Opera. It corresponds directly to the HTML loop attribute.
Conclusion
The HTML DOM Video loop property provides programmatic control over video looping behavior. Setting it to true makes the video restart automatically when it ends, while false allows the video to stop naturally. This property is essential for creating seamless video experiences in web applications.
196 Views
