HTML onplay Event Attribute - HTML Media Events Attribute

The HTML onplay Attribute is a event attribute which occurs when the audio/video is played. The audio/video can be played either by the user or programmatically. Supported Tags: <audio> .

Exanple of HTML onplay Event Attribute

It will alert that the video has started to play.

index.html

Example: HTML

<!DOCTYPE html> 
<html> 
<body> 

<script>
function myFunction() {
  alert('The video has started to play');
}
</script>

<p>Press play on the video:</p>

<video controls onplay="myFunction()">
  <source src="https://download.samplelib.com/mp4/sample-5s.mp4" type="video/mp4">
  <source src="https://download.samplelib.com/mp4/sample-5s.mp4" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<p>Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

</body> 
</html>

Output should be:

Definition and Usage of HTML onplay Event Attribute

The play event occurs when the audio/video has been started or is no longer paused.
Tip: The pause event occurs when the audio/video has been paused.

Browser Support of HTML onplay Event Attribute

The numbers in the table specify the first browser version that fully supports the event.

Output should be:

Syntax of HTML onplay Event Attribute

<element onplay="script">

Attribute Values of HTML onplay Event Attribute

Value	Description
script	The script to be run when the video has started

Technical Details of HTML onplay Event Attribute

Supported HTML tags:	<audio> and <video>

Alert that the audio has started to play

Play audio

index.html

Example: HTML

<!DOCTYPE html> 
<html> 
<body> 

<script>
function myFunction() {
  alert('The audio has started to play');
}
</script>

<p>Press play on the audio:</p>

<audio controls onplay="myFunction()">
  <source src="https://file-examples.com/index.php/sample-audio-files/sample-mp3-download/" type="audio/ogg">
  <source src="https://file-examples.com/index.php/sample-audio-files/sample-mp3-download/" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

</body> 
</html>

Output should be:

Alert that the video has started to play

Press play on the video.

index.html

Example: HTML

<!DOCTYPE html> 
<html> 
<body> 

<script>
function myFunction() {
  alert('The video has started to play');
}
</script>

<p>Press play on the video:</p>

<video controls onplay="myFunction()">
  <source src="https://download.samplelib.com/mp4/sample-5s.mp4" type="video/mp4">
  <source src="https://download.samplelib.com/mp4/sample-5s.mp4" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<p>Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

</body> 
</html>

Output should be:

html event attributes

Type:	Develop
Category:	Web Tutorial
Sub Category:	HTML Media Events Attribute
Uploaded by:	Admin

Read Article
https://develop.horje.com/learn/1434/reference