canplaythrough

16 March, 2023

Contributors

Milsaware

@milsaware

About

The canplaythrough event is triggered when a media element, such as an HTML5 <video> or <audio> element, has enough data available to play through to the end without buffering or interruption. This event is useful for checking whether a media element is fully loaded and ready for playback without interruption.

When a media element is loaded, it may take some time for enough data to be downloaded to the client device to allow for smooth playback. The canplaythrough event is triggered when the browser has determined that enough data has been buffered to allow for uninterrupted playback all the way to the end of the media.

The canplaythrough event can be used to perform actions once a media element is fully loaded and ready to play, such as updating the UI to show that the media is fully loaded and ready, or automatically starting playback.

Event listener

Here's an example of using the canplaythrough event listener

HTML

<audio id="myAudio" controls>
    <source src="my-audio-file.mp3" type="audio/mp3">
</audio>

JavaScript

// Get a reference to the audio element
const audio = document.getElementById('myAudio');

// Add a listener for the canplaythrough event
audio.addEventListener('canplaythrough', function() {
    console.log('Audio file is ready to play!');
    // Enable the play button, set a flag, or do other things
});

Here, we have an audio element with an id of "myAudio" and a source element with a src attribute pointing to an audio file. In the JavaScript code, we get a reference to the audio element using its id, and add a canplaythrough event listener to it using the addEventListener() method. When the canplaythrough event is triggered, the anonymous function passed to addEventListener() will be executed, which simply logs a message to the console and performs some other action if desired.

Property

There is an oncanplaythrough property that can be used to attach an event handler function to the canplaythrough event for a media element. The oncanplaythrough property is a shorthand for using the addEventListener method to add an event listener for the canplaythrough event:

const videoElement = document.querySelector('#myVideo');

videoElement.oncanplaythrough = function(event) {
    // Perform some action when the video is fully loaded and ready to play through
    console.log('Video is fully loaded and ready to play through');
};

Here, the oncanplaythrough property is used to assign an anonymous function as the event handler for the canplaythrough event of the videoElement.

Inline

You can also use the oncanplaythrough attribute inline to attach an event handler function to the canplaythrough event of a media element:

<video oncanplaythrough="console.log('Video is fully loaded and ready to play through')">
    <source src="myVideo.mp4" type="video/mp4">
</video>

Here, the oncanplaythrough property is used inline to attach an anonymous function as the event handler for the canplaythrough event of the <video> element. When the canplaythrough event is triggered, the function will log a message to the console.

While using the on properties inline can be convenient for small scripts or simple applications, it can become unwieldy for larger applications. In general, it is recommended to use the addEventListener method to attach event listeners in JavaScript code rather than inline.

Programmatic trigger

There is also no programmatic canplaythrough() method. The canplaythrough event is triggered when the media file has been fully loaded and is ready to play without buffering, so it is not something that can be triggered programmatically. It is triggered automatically by the browser when the media file is ready to play.

You can, however, check the readyState property of the media element to determine if it is ready to play. When the readyState is set to HAVE_ENOUGH_DATA, the media file is fully loaded and ready to play without buffering, which will also trigger the canplaythrough event. Here's an example:

const audio = document.getElementById('myAudio');
if (audio.readyState >= 4) {
    console.log('Audio file is ready to play!');
    // Enable the play button, set a flag, or do other things
} else {
    audio.addEventListener('canplaythrough', function() {
        console.log('Audio file is ready to play!');
        // Enable the play button, set a flag, or do other things
    });
}

Here, we get a reference to the audio element using its id, and check its readyState property to see if it is set to HAVE_ENOUGH_DATA. If it is, we know that the audio file is fully loaded and ready to play, so we log a message to the console and perform some other action if desired. If it is not ready yet, we add a canplaythrough event listener to the audio element to wait for it to become ready. When it does become ready, the event listener will be triggered, and we can log a message to the console and perform some other action if desired.

javascript

audio

video

media