HTML | Evento de cambio de duración de DOM

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *