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

  • <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

 

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!