oncanplay

The oncanplay event is triggered when the browser has buffered enough of the media to begin playback. It indicates that the media is ready to start playing.

oncanplay event

The oncanplay event is triggered when the browser has buffered enough of the media to begin playback. It indicates that the media is ready to start playing.

Syntax

In HTML

index.html

<element oncanplay="myScript">

In JS

script.js

object.oncanplay = function(){myScript};

In JavaScript, the `addEventListener()` function is used.

script.js

object.addEventListener("canplay", myScript);

Example

::event-oncanplay ::

index.html

<!DOCTYPE html> 
<html> 
<body> 
<h1>HTML DOM Events</h1>
<h2>The oncanplay</h2>

<video controls oncanplay="myFunction()">
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<p>Video courtesy of <a href="https://institute.qarpeo.com" target="_blank">Tree</a>.</p>

<p id="demo"></p>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Can start playing video.";
}
</script>

</body> 
</html>

Values

<script>
- Indicates the name of the <script> to run when the event is triggered.

The oncanplay event signals that the media is buffered enough for playback to begin. This event can be used to trigger a function once the media is ready. It's commonly applied to <audio> and <video> elements to ensure smooth media playback.

onabort

The onabort event is triggered when the loading of an audio or video file is canceled. It happens when a download is stopped.

oncanplaythrough

The oncanplaythrough event is triggered when the browser determines that a media file can be played from start to finish without interruption for buffering. This applies to both audio and video files.