HTML onpause Event Attribute

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

<!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>

Browser Support

The following table will show you the current browser support for the HTML onpause Event Attribute.

Desktop
Edge Chrome Firefox Opera Safari
YesYesYesYesYes
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
YesYesYesYesYesYes

Last updated by CSSPortal on: 14th October 2023