HTML onplaying 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 onplaying HTML event attribute is used to specify a script to be run when an audio or video element starts playing. It is an attribute that can be used on the <audio> and <video> elements.

The onplaying event is fired when the paused property of the audio or video element is changed from true to false, as a result of the play() method, or the autoplay attribute.

The onplaying event is not cancelable and does not bubble. This means that it cannot be prevented from firing, and it does not propagate up the element tree to parent elements.

Here is an example of how to use the onplaying event attribute:

<video onplaying="myFunction()">
  <source src="my_video.mp4" type="video/mp4">
</video>

The myFunction() JavaScript function will be called when the video element starts playing.

The onplaying event can be used for a variety of purposes, such as:

To start playing another audio or video element when one element starts playing.
To update the user interface to indicate that the audio or video element is playing.
To collect performance data about the audio or video element.

Here is an example of a JavaScript function that can be used to start playing another audio element when a video element starts playing:

function startPlayingAudioWhenVideoStartsPlaying(videoElement, audioElement) {
  videoElement.onplaying = function() {
    audioElement.play();
  };
}

This function can be used as follows:

<video onplaying="startPlayingAudioWhenVideoStartsPlaying(this, myAudioElement)">
  <source src="my_video.mp4" type="video/mp4">
</video>

<audio id="myAudioElement">
  <source src="my_audio.mp3" type="audio/mp3">
</audio>

When the video element starts playing, the startPlayingAudioWhenVideoStartsPlaying() function will be called, which will start playing the audio element.

Syntax

<element onplaying="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 onplaying="myFunction()">  

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

  Your browser does not support the audio tag.

</audio>



<p>Play sound file.</p> 



<script>

function myFunction() {

    alert("EXAMPLE: Sound file started playing.");

}

</script> 



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



</body>

</html>