onended

The onended event is triggered when an audio or video reaches its end. It is commonly used to display messages like "thanks for listening" or trigger other actions once playback finishes.

onended event

The onended event is triggered when an <audio> or <video> element finishes playing. It enables you to execute a script once the media playback is complete.

Syntax

In HTML

index.html

<element onended ="myScript">

In JS

script.js

object.onended  = function(){myScript};

In JavaScript, the `addEventListener()` function is used.

script.js

object.addEventListener("ended ", myScript);

Example

::event-onended ::

index.html

<!DOCTYPE html>
<html>
<body>
<h1>HTML DOM Events</h1>
<h2>The onended Event</h2>

<p>Assign an "onended" event to an audio element.</p>

<p>Press play and wait for the audio to end.</p>

<audio controls onended="myFunction()">
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<p id="demo"></p>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "The video has ended";
}
</script>

</body>
</html>

Value

<script>
- Indicates the <script> to run when the event is triggered.

The onended event is triggered when an <audio> or <video> element finishes playback. It allows you to run a <script> or display a message once the media ends. This event is useful for actions like showing a "thank you" message or transitioning to another activity.

onemptied

The onemptied event is triggered when an audio or video element is emptied. It does not occur when the media has finished loading, but only when the media source is removed or becomes unavailable.

onloadeddata

The onloadeddata event is triggered when a media frame is loaded, but it doesn't ensure that enough data is available to start playback. The event simply indicates that some data has been loaded.