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 controls Property
The HTML DOM Video controls property returns or sets a boolean value that determines whether the video's standard playback controls (play, pause, volume, etc.) are displayed to the user.
Syntax
Following is the syntax for returning the controls property −
mediaObject.controls
Following is the syntax for setting the controls property −
mediaObject.controls = booleanValue
Parameters
The booleanValue can be one of the following −
| Value | Description |
|---|---|
true |
The video will display standard controls (play, pause, volume, progress bar, etc.) |
false |
The video will not display standard controls |
Return Value
The property returns a boolean value indicating whether the controls are currently enabled (true) or disabled (false).
Example − Getting Controls Status
Following example demonstrates how to check if video controls are enabled −
<!DOCTYPE html>
<html>
<head>
<title>Video Controls Status</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<video id="myVideo" width="320" height="240" controls>
<source src="sample.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br><br>
<button onclick="checkControls()">Check Controls Status</button>
<p id="status"></p>
<script>
function checkControls() {
var video = document.getElementById("myVideo");
var status = document.getElementById("status");
if (video.controls) {
status.textContent = "Video controls are enabled";
} else {
status.textContent = "Video controls are disabled";
}
}
</script>
</body>
</html>
The output will display the current status of video controls when the button is clicked −
[Video player with controls visible] [Check Controls Status button] Video controls are enabled
Example − Toggling Video Controls
Following example shows how to dynamically enable or disable video controls −
<!DOCTYPE html>
<html>
<head>
<title>Toggle Video Controls</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<video id="toggleVideo" width="320" height="240">
<source src="sample.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br><br>
<button onclick="enableControls()">Enable Controls</button>
<button onclick="disableControls()">Disable Controls</button>
<p id="message"></p>
<script>
var video = document.getElementById("toggleVideo");
var message = document.getElementById("message");
function enableControls() {
video.controls = true;
message.textContent = "Video controls enabled";
}
function disableControls() {
video.controls = false;
message.textContent = "Video controls disabled";
}
</script>
</body>
</html>
Clicking the buttons will show or hide the video controls dynamically −
[Video player] [Enable Controls] [Disable Controls] Video controls enabled/disabled (based on button clicked)
Example − Conditional Controls Based on User Input
Following example demonstrates enabling video controls only after user provides their name −
<!DOCTYPE html>
<html>
<head>
<title>Conditional Video Controls</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
padding: 20px;
}
input[type="button"] {
border-radius: 10px;
padding: 8px 15px;
margin: 5px;
}
input[type="text"] {
padding: 5px;
margin: 5px;
}
#message {
margin-top: 10px;
font-weight: bold;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<form>
<fieldset>
<legend>Video Access Control</legend>
<video id="demo" width="320" height="240">
<source src="sample.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br><br>
<input type="text" id="userName" placeholder="Enter your full name...">
<br>
<input type="button" onclick="enableVideo()" value="Watch Video">
<div id="message"></div>
</fieldset>
</form>
<script>
var video = document.getElementById("demo");
var userInput = document.getElementById("userName");
var message = document.getElementById("message");
// Initially disable controls
video.controls = false;
function enableVideo() {
if (userInput.value.trim() !== '') {
video.controls = true;
message.textContent = 'Thank you ' + userInput.value + '! Video controls are now enabled.';
message.style.color = 'green';
} else {
video.controls = false;
message.textContent = 'Please provide your full name to enable video controls.';
message.style.color = 'red';
}
}
</script>
</body>
</html>
The output shows different behaviors based on user input −
When name field is empty: "Please provide your full name to enable video controls." (red text) When name is provided: "Thank you [Name]! Video controls are now enabled." (green text)
Common Use Cases
The controls property is commonly used in the following scenarios −
-
Custom video players − Disable default controls to implement custom playback interface
-
Access control − Enable controls only after user authentication or form completion
-
Interactive tutorials − Show controls at specific points in the learning process
-
Autoplay scenarios − Hide controls for background videos or promotional content
Browser Compatibility
The controls property is supported by all modern browsers that support the HTML5 video element, including Chrome, Firefox, Safari, Edge, and Opera. It is part of the HTML5 standard and works consistently across platforms.
Conclusion
The HTML DOM Video controls property provides a simple way to show or hide the standard video playback controls. Setting it to true displays the controls, while false hides them. This property is essential for creating custom video experiences and implementing conditional access to video functionality.
233 Views
