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
Execute a script when the media is paused either by the user or programmatically in HTML?
The onpause attribute in HTML is an event handler that triggers when a media element (audio or video) is paused, either by user interaction or programmatically through JavaScript. This attribute allows you to execute custom JavaScript functions when the media playback is paused.
Syntax
Following is the syntax for the onpause attribute −
<video onpause="functionName()" controls> <source src="video.mp4" type="video/mp4"> </video>
Following is the syntax for programmatic usage −
element.onpause = function() { /* code */ };
Using onpause with Video Element
The onpause attribute is commonly used with <video> and <audio> elements to provide feedback when media playback is paused.
Example
Following example demonstrates the onpause attribute with a video element −
<!DOCTYPE html>
<html>
<head>
<title>Onpause Attribute Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2 id="status">Video Status: Ready to Play</h2>
<video id="myVideo" width="320" height="240" controls
onpause="pausedFunction()" onplay="playFunction()">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
<p>Play the video and then pause it to see the onpause event in action.</p>
<script>
function pausedFunction() {
document.getElementById("status").innerHTML = "Video Status: ?? Media Paused!";
document.getElementById("status").style.color = "red";
}
function playFunction() {
document.getElementById("status").innerHTML = "Video Status: ?? Media Playing!";
document.getElementById("status").style.color = "green";
}
</script>
</body>
</html>
When you pause the video, the heading text changes to display "Media Paused!" in red color −
Video Status: ?? Media Paused! (displayed in red when video is paused) Video Status: ?? Media Playing! (displayed in green when video is playing)
Using onpause with Audio Element
Example
Following example shows how to use the onpause attribute with an audio element −
<!DOCTYPE html>
<html>
<head>
<title>Audio Onpause Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Audio Player with Pause Detection</h2>
<audio id="myAudio" controls onpause="audioPaused()">
<source src="https://www.soundjay.com/misc/sounds/bell-ringing-05.wav" type="audio/wav">
<source src="https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<p id="message">Audio ready to play</p>
<script>
function audioPaused() {
document.getElementById("message").innerHTML = "? Audio has been paused";
document.getElementById("message").style.backgroundColor = "#ffe6e6";
document.getElementById("message").style.padding = "10px";
document.getElementById("message").style.border = "1px solid #ff9999";
}
</script>
</body>
</html>
When the audio is paused, the message below the player updates with visual styling to indicate the paused state.
Programmatic Pause Detection
You can also add the onpause event listener programmatically using JavaScript instead of inline HTML attributes.
Example
<!DOCTYPE html>
<html>
<head>
<title>Programmatic Pause Event</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Programmatic Event Handling</h2>
<video id="programVideo" width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
<p id="eventLog">Event log will appear here...</p>
<script>
var video = document.getElementById("programVideo");
var log = document.getElementById("eventLog");
// Add pause event listener
video.addEventListener("pause", function() {
var timestamp = new Date().toLocaleTimeString();
log.innerHTML = "?? Video paused at " + timestamp;
log.style.color = "#d9534f";
});
// Add play event listener for comparison
video.addEventListener("play", function() {
var timestamp = new Date().toLocaleTimeString();
log.innerHTML = "?? Video started playing at " + timestamp;
log.style.color = "#5cb85c";
});
</script>
</body>
</html>
This method provides more flexibility and separates the JavaScript logic from the HTML markup. The event log displays timestamps for when the video is played or paused.
Common Use Cases
The onpause attribute is useful for several scenarios −
Analytics tracking − Record when users pause media content for engagement metrics.
UI updates − Change button states, display messages, or show pause indicators.
Save progress − Store the current playback position when media is paused.
Resource management − Pause other processes or media when the main content is paused.
Browser Compatibility
The onpause attribute is supported in all modern browsers that support HTML5 video and audio elements. This includes Chrome, Firefox, Safari, Edge, and Opera. The event works consistently across desktop and mobile platforms.
Conclusion
The onpause attribute provides a simple way to execute JavaScript when media playback is paused. Whether used inline in HTML or added programmatically, it enables responsive user interfaces and enhanced media control functionality. This event handler is essential for creating interactive media experiences on web pages.
214 Views
