HTML | Evento DOM oncanplay – Part 1

El evento HTML DOM oncanplay ocurre cuando un audio/video específico se almacena en búfer lo suficiente como para comenzar.
El orden de los eventos ocurre Durante el proceso de carga de un audio/video: 
 

  1. onloadstart
  2. cambio de duración
  3. metadatos cargados
  4. datos cargados
  5. en progreso
  6. oncanplay
  7. oncanplaythrough

Etiquetas admitidas

Sintaxis:
En HTML: 
 

<element oncanplay="myScript">

En JavaScript: 
 

object.oncanplay = function(){myScript};

En JavaScript, usando el método addEventListener(): 
 

object.addEventListener("canplay", myScript);

Ejemplo: uso de HTML 
 

html

<!DOCTYPE html>
<html>
 
<body>
    <center>
        <h1 style="color:green">
          GeeksforGeeks
      </h1>
        <h2>HTML DOM oncanplay event</h2>
 
        <video controls oncanplay="myFunction()">
            <source src="Geekfun.mp4" type="video/mp4">
        </video>
 
        <script>
            function myFunction() {
                alert("Can start playing video");
            }
        </script>
    </center>
</body>
 
</html>

Producción: 
 

Ejemplo: uso de JavaScript 
 

html

<!DOCTYPE html>
<html>
 
<body>
    <center>
        <h1 style="color:green">
          GeeksforGeeks
      </h1>
        <h2>HTML DOM oncanplay event</h2>
 
        <video controls id="myVideo">
            <source src="Geekfun.mp4" type="video/mp4">
        </video>
 
        <script>
            document.getElementById("myVideo").oncanplay = function() {
                myFunction()
            };
 
            function myFunction() {
                alert("Can start playing video");
            }
        </script>
    </center>
</body>
 
</html>

Producción: 
 

Ejemplo: en JavaScript, usando el método addEventListener(): 
 

html

<!DOCTYPE html>
<html>
 
<body>
    <center>
        <h1 style="color:green">
          GeeksforGeeks
      </h1>
        <h2>HTML DOM oncanplay event</h2>
 
        <video controls id="myVideo">
            <source src="Geekfun.mp4" type="video/mp4">
        </video>
 
        <script>
            document.getElementById(
              "myVideo").addEventListener(
              "canplay", myFunction);
 
            function myFunction() {
                alert("Can start playing video");
            }
        </script>
    </center>
</body>
 
</html>

Producción: 
 

Navegadores compatibles: los navegadores compatibles con DOM oncanplay 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 *