onplay
The onplay event in HTML is triggered when media begins playing, enabling developers to take actions or make updates in response.
onplay event
The onplay event attribute in HTML is activated when media playback begins, like with <audio> or <video> elements. It allows developers to perform actions or run scripts in response to the start of playback.
Syntax
In HTML
index.html
<element onplay ="myScript">
In JS
script.js
object.onplay = function(){myScript};
In JavaScript, the addEventListener() function is used.
script.js
object.addEventListener("play ", myScript);
Example
::event-onplay
::
index.html
<!DOCTYPE html>
<html>
<body>
<h1>HTML DOM Events</h1>
<h2>The onplay Event</h2>
<p>Assign an "onplay" event to a video element.</p>
<p>Press play.</p>
<video controls onplay="myFunction()">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<p>Video courtesy of <a href="https://institute.qarpeo.com" target="_blank">Tree</a>.</p>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "The video has started to play";
}
</script>
</body>
</html>
Values
Conclusion
The onplay event in HTML is triggered when media playback starts, allowing developers to execute actions or scripts in response. It is commonly used with <audio> and <video> elements. This event enhances user interaction by enabling responsive behavior as media begins to play.