HTML DOM onended Event
The HTML DOM onended event occurs when the audio/video is ended. We can add some custom messages in this event like “Thank for watching”, “Share”, etc.
Supported Tags:
- <audio>
- <video>
Syntax:
In HTML:
<element onended="myScript">
In JavaScript:
object.onended = function(){myScript};
In JavaScript, using the addEventListener() method:
object.addEventListener("ended", myScript);
Example: Using HTML
HTML
<!DOCTYPE html> < html > < body > < center > < h1 style = "color:green" > w3wiki </ h1 > < h2 > HTML DOM onended Event </ h2 > < audio controls onended = "gfgFun()" > < source src = "beep.mp3" type = "audio/mpeg" > </ audio > < script > function gfgFun() { alert("Thanks for listening"); } </ script > </ center > </ body > </ html > |
Output:
Example: Using JavaScript
HTML
<!DOCTYPE html> < html > < body > < center > < h1 style = "color:green" > w3wiki </ h1 > < h2 >HTML DOM onended Event</ h2 > < audio id = "audioId" controls> < source src = "beep.mp3" type = "audio/mpeg" > </ audio > < p id = "try" ></ p > < script > document.getElementById( "audioId").onended = function () { gfgFun() }; function gfgFun() { document.getElementById( "try").innerHTML = "Thanks for listening"; } </ script > </ center > </ body > </ html > |
Output:
Example: Using the addEventListener() method
html
<!DOCTYPE html> < html > < body > < center > < h1 style = "color:green" > w3wiki </ h1 > < h2 >HTML DOM onended Event</ h2 > < audio id = "audioId" controls> < source src = "beep.mp3" type = "audio/mpeg" > </ audio > < p id = "demo" ></ p > < script > document.getElementById( "audioId") .addEventListener("ended", gfgFun); function gfgFun() { document.getElementById( "demo").innerHTML = "Thanks for listening"; } </ script > </ center > </ body > </ html > |
Output:
Supported Browsers: The browsers supported by HTML DOM onended Event are listed below:
- Google Chrome
- Internet Explorer 9.0
- Firefox
- Apple Safari
- Opera
Contact Us