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 paused Property
The HTML DOM Video paused property returns a boolean value indicating whether the video is currently paused or playing. This read-only property is true when the video is paused and false when it is playing.
Syntax
Following is the syntax to access the paused property −
videoElement.paused
Return Value
The property returns a boolean value −
- true − The video is currently paused
- false − The video is currently playing
Example − Basic Paused Property Check
Following example demonstrates how to check if a video is paused using the paused property −
<!DOCTYPE html>
<html>
<head>
<title>Video Paused Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<video id="myVideo" width="400" 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="checkPaused()">Check Paused Status</button>
<p id="status"></p>
<script>
function checkPaused() {
var video = document.getElementById("myVideo");
var statusElement = document.getElementById("status");
if (video.paused) {
statusElement.innerHTML = "Video is paused";
statusElement.style.color = "red";
} else {
statusElement.innerHTML = "Video is playing";
statusElement.style.color = "green";
}
}
</script>
</body>
</html>
The output displays the current paused state of the video when the button is clicked −
[Video Player with Controls] [Check Paused Status Button] Video is paused (red text) / Video is playing (green text)
Example − Dynamic Background Change
Following example changes the background color based on the video's paused state −
<!DOCTYPE html>
<html>
<head>
<title>Video Paused with Background Change</title>
<style>
.container {
padding: 20px;
text-align: center;
font-family: Arial, sans-serif;
transition: background-color 0.3s;
}
.playing { background-color: #e8f5e8; }
.paused { background-color: #ffe8e8; }
</style>
</head>
<body>
<div id="container" class="container paused">
<h2>Video Paused Status Demo</h2>
<video id="video" width="400" controls onclick="updateStatus()">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<p>Click on the video to check paused status</p>
<p id="message">Video is paused</p>
</div>
<script>
var video = document.getElementById("video");
var container = document.getElementById("container");
var message = document.getElementById("message");
function updateStatus() {
setTimeout(function() {
if (video.paused) {
container.className = "container paused";
message.innerHTML = "Video is paused";
} else {
container.className = "container playing";
message.innerHTML = "Video is playing";
}
}, 100);
}
// Also check on play/pause events
video.addEventListener('play', updateStatus);
video.addEventListener('pause', updateStatus);
</script>
</body>
</html>
The background changes to light green when playing and light red when paused −
Video Paused Status Demo [Video Player with Controls] Click on the video to check paused status Video is paused (red background) / Video is playing (green background)
Example − Play/Pause Toggle Button
Following example creates a custom play/pause button using the paused property −
<!DOCTYPE html>
<html>
<head>
<title>Custom Play/Pause Button</title>
<style>
.video-container {
text-align: center;
font-family: Arial, sans-serif;
padding: 20px;
}
.custom-button {
background-color: #4CAF50;
color: white;
padding: 12px 24px;
font-size: 16px;
border: none;
border-radius: 6px;
cursor: pointer;
margin: 10px;
}
.custom-button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="video-container">
<video id="myVideo" width="400">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br>
<button class="custom-button" onclick="togglePlayPause()" id="playPauseBtn">Play</button>
<p id="videoStatus">Video is paused</p>
</div>
<script>
var video = document.getElementById("myVideo");
var button = document.getElementById("playPauseBtn");
var status = document.getElementById("videoStatus");
function togglePlayPause() {
if (video.paused) {
video.play();
button.innerHTML = "Pause";
status.innerHTML = "Video is playing";
} else {
video.pause();
button.innerHTML = "Play";
status.innerHTML = "Video is paused";
}
}
</script>
</body>
</html>
The button text changes between "Play" and "Pause" based on the video's current state −
[Video Player without Controls] [Play] / [Pause] Button Video is paused / Video is playing
Key Points
- The
pausedproperty is read-only and cannot be set directly - Use
play()andpause()methods to control video playback - The property is
trueby default when the video element is first loaded - It works with both
<video>and<audio>elements - Combine with event listeners for
playandpauseevents for better user experience
Browser Compatibility
The paused property is supported by all modern browsers that support HTML5 video, including Chrome, Firefox, Safari, Edge, and Opera. It is part of the HTML5 media element specification.
Conclusion
The HTML DOM Video paused property provides a simple way to check whether a video is currently paused or playing. It returns true when paused and false when playing, making it essential for creating custom video controls and interactive video applications.
165 Views
