Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML | DOM oncanplay Event

  • Last Updated : 30 Jul, 2021

The HTML DOM oncanplay event occurs when a specified audio/video is buffered enough to begin.
The order of events occur During the loading process of an audio/video: 
 

  1. onloadstart
  2. ondurationchange
  3. onloadedmetadata
  4. onloadeddata
  5. onprogress
  6. oncanplay
  7. oncanplaythrough

Supported Tags

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • <audio> 
  • <video>

Syntax:
In HTML: 
 

<element oncanplay="myScript">

In JavaScript: 
 



object.oncanplay = function(){myScript};

In JavaScript, using the addEventListener() method: 
 

object.addEventListener("canplay", myScript);

Example: Using 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>

Output: 
 

 

Example: Using 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>

Output: 
 



 

Example: In JavaScript, using the addEventListener() method: 
 

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>

Output: 
 

 

Supported Browsers: The browsers supported by DOM oncanplay Event are listed below: 
 

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Apple Safari
  • Opera

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!