El evento onended HTML DOM se produce cuando finaliza el audio/vídeo. Podemos agregar algún mensaje personalizado en este evento como «Gracias por mirar», «Compartir», etc.
Etiquetas admitidas
- <audio>
- <vídeo>
Sintaxis:
En HTML:
<element onended="myScript">
En JavaScript:
object.onended = function(){myScript};
En JavaScript, usando el método addEventListener():
object.addEventListener("ended", myScript);
Ejemplo: uso de HTML
html
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color:green">GeeksfroGeeks</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>
Producción:
Ejemplo: uso de JavaScript
html
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color:green">GeeksfroGeeks</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>
Producción:
Ejemplo: uso del método addEventListener()
html
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color:green">GeeksfroGeeks</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>
Producción:
Navegadores admitidos: los navegadores admitidos por HTML DOM onended Event se enumeran a continuación:
- Google Chrome
- Internet Explorer 9.0
- Firefox
- safari de manzana
- Ópera
Publicación traducida automáticamente
Artículo escrito por Vijay Sirra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA