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.

oncanplaythrough event

The oncanplaythrough event is fired when the browser has buffered enough of the media to allow uninterrupted playback from start to finish. This means the data is sufficiently loaded for smooth playback. To implement it, add the attribute to the media element and define the script to execute when the event is triggered.

Syntax

In HTML

index.html

<element oncanplaythrough="myScript">

In JS

script.js

object.oncanplaythrough = function(){myScript};

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

script.js

object.addEventListener("canplaythrough", myScript);

Example

::event-oncanplaythrough ::

index.html

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

<video controls oncanplaythrough="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 play through without stopping.";
}
</script>

</body> 
</html>

Values

<script>
- Defines the <script> to run when the event is activated.

Conclusion

The oncanplaythrough event ensures smooth, uninterrupted playback of media. It triggers once the browser has buffered enough data to play the media from start to finish. This event is useful for both <audio> and <video> elements to improve user experience.

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.

ondurationchange

The ondurationchange event is triggered when the duration of a media file is updated. This typically happens when an audio or video is loaded, changing the duration from "NaN" to a valid value.