HTML onended Attribute - HTML Attribute

Definition and Usage

The onended event occurs when the audio/video has reached the end.

This event is useful for messages like "thanks for listening", "thanks for watching", etc.

Applies to

The onended attribute is part of the Event Attributes, and can be used on the following elements:

Elements	Event
<audio>	ended
<video>	ended

Browser Support

The onended attribute has the following browser support for each element:

How to Run "myFunction" when the audio has finished playing

Audio Example. Play the audio file: This example demonstrates how to use the "onended" attribute on an AUDIO element.

index.html

Example: HTML

<audio id="myAudio" controls onended="myFunction()">
  <source src="https://download.samplelib.com/mp3/sample-3s.mp3" type="audio/ogg">
  <source src="https://download.samplelib.com/mp3/sample-3s.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<p>Play the audio file:</p>

<script>
function myFunction() {
  alert("Thank you for listening");
}
</script>

Output should be:

How to Run "myFunction" when the video is finished

Video Example. Play the video: This example demonstrates how to use the "onended" attribute on a VIDEO element.

index.html

Example: HTML

<video id="myVideo" width="320" height="176" controls onended="myFunction()">
  <source src="https://www.sample-videos.com/video321/mp4/240/big_buck_bunny_240p_10mb.mp4" type="video/mp4">
  <source src="https://www.sample-videos.com/video321/mp4/240/big_buck_bunny_240p_10mb.mp4" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<p>Play the video:</p>

<script>
function myFunction() {
  alert("Thank you for watching");
}
</script>

html onended attribute

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

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