El evento HTML DOM ondurationchange ocurre cuando se cambia la duración del audio/video.
La duración del audio/video cambia de “NaN” a la duración real del audio/video cuando se carga.
Los siguientes eventos ocurren durante el proceso de carga de un audio/video:
- onloadstart
- cambio de duración
- metadatos cargados
- datos cargados
- en progreso
- oncanplay
- oncanplaythrough
Etiquetas admitidas:
Sintaxis:
En HTML:
<element ondurationchange="myScript">
En JavaScript:
object.ondurationchange = function(){myScript};
En JavaScript, usando el método addEventListener():
object.addEventListener("durationchange", myScript);
Ejemplo 1: Uso de HTML
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM ondurationchange Event
</title>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h2>HTML DOM ondurationchange Event</h2>
<video controls ondurationchange="GFGfun()">
<source src="Canvas.move_.mp4"
type="video/mp4">
</video>
<script>
function GFGfun() {
alert("The video duration has changed");
}
</script>
</center>
</body>
</html>
Producción:
Ejemplo 2: Uso de JavaScript
html
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM ondurationchange Event</title>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h2>HTML DOM ondurationchange Event</h2>
<video controls ondurationchange="GFGfun()">
<source src="Canvas.move_.mp4" type="video/mp4">
</video>
<script>
document.getElementById("durVideo").ondurationchange = function() {
GFGfun()
};
function GFGfun() {
alert("The video duration has changed");
}
</script>
</center>
</body>
</html>
Producción:
Ejemplo 3: usando el método addEventListener():
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM ondurationchange Event
</title>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h2>HTML DOM ondurationchange Event</h2>
<video controls ondurationchange="GFGfun()">
<source src="mov_bbb.mp4" type="video/mp4">
</video>
<script>
document.getElementById(
"durVideo").addEventListener("durationchange", GFGfun);
function GFGfun() {
alert("The video duration has changed");
}
</script>
</center>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con HTML DOM ondurationchange Event se enumeran a continuación:
- Google Chrome
- explorador de Internet
- 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