HTML onpause Event Attribute

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The onpause HTML event attribute specifies a script to be run when an audio or video element is paused. It can be used to perform a variety of tasks, such as:

Updating a display to show that the media is paused.
Stopping a timer or animation.
Displaying a message to the user.
Saving the media's current position.

The onpause event is triggered when the media is paused either by the user or programmatically. For example, the user might click the pause button or call the pause() method on the media element.

To use the onpause event attribute, simply add it to the audio or video element that you want to listen for the event. The value of the attribute should be the name of the JavaScript function that you want to be called when the media is paused.

For example, the following code will call the myFunction() function when the video element with the ID myVideo is paused:

<video id="myVideo" onpause="myFunction()">
  </video>

The myFunction() function can then do whatever you need it to do, such as updating a display, stopping a timer, or displaying a message to the user.

Here is an example of a complete HTML document that uses the onpause event attribute:

<!DOCTYPE html>
<html>
<head>
  <title>onpause Example</title>
  <script>
    function myFunction() {
      // Update the display to show that the video is paused.
      document.getElementById("videoStatus").innerHTML = "Video is paused.";
    }
  </script>
</head>
<body>
  <h1>onpause Example</h1>

  <video id="myVideo" onpause="myFunction()">
    </video>

  <p id="videoStatus"></p>
</body>
</html>

When you load this page in a web browser and start the video, the onpause event will not be triggered until you pause the video. Once you pause the video, the myFunction() function will be called and the videoStatus element will be updated to show that the video is paused.

Syntax

<element onpause="script">

Values

scriptThe name of the script to use when the event has been triggered.

Example

HTML

<!DOCTYPE HTML>

<html>

<body>



<audio id="myAudio" controls onpause="myFunction()">  

  <source src="audio.mp3" type="audio/mpeg">

  Your browser does not support the audio tag.

</audio>



<p>Press play and then pause</p> 



<script>

function myFunction() {

    alert("EXAMPLE: audio file is paused.");

}

</script> 



<p>This example shows how to use the onpause attribute for an AUDIO element.</p>



</body>

</html>