JavaScript HTML DOM Events: canplaythrough

The canplaythrough event indicates that the media is likely buffered enough to play straight through to the end without stalling. While canplay merely tells you that playback can start, canplaythrough is useful for signaling “ready for continuous playback”. It is not a 100% guarantee, but it’s a solid cue to enable a “Play” button or hide a loading indicator.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>canplaythrough – likely to play without pauses</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    
    <style>
        body {
            font-family: Arial, sans-serif; 
            padding: 16px; 
        }
        
        .box {
            max-width: 640px; 
            margin: 0 auto; 
        }
        
        video {
            width: 100%;
            height: auto;
            background: #000; 
            border-radius: 8px; 
        }
        
        .row {
            display: flex;
            gap: 8px; 
            margin: 10px 0; 
            flex-wrap: wrap; 
        }
        
        button {
            padding: 6px 12px; 
            border: 1px solid #ccc; 
            border-radius: 6px; 
            cursor: pointer; 
        }
        
        button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        
        .status {
            margin: 8px 0; 
            font-size: 14px; 
        }
    </style>
</head>
<body>
    <div class="box">
        <h2 style="margin:0 0 8px 0;">Event: canplaythrough</h2>
        
        <video id="vid" controls preload="auto">
            <source src="/video/website.mp4" type="video/mp4">Your browser does not support MP4 video.
        </video>
        
        <p id="msg" class="status" aria-live="polite">Loading …</p>
        
        <div class="row">
            <button id="playBtn" type="button" disabled>Play</button>
            <button id="pauseBtn" type="button" disabled>Pause</button>
        </div>
    </div>
    
    <script>
        (function(){
            var vid = document.getElementById("vid");
            var msg = document.getElementById("msg");
            var playBtn = document.getElementById("playBtn");
            var pauseBtn = document.getElementById("pauseBtn");
        
            vid.addEventListener("loadedmetadata", function(){
                msg.textContent = "Metadata loaded. Duration: " +
                (isFinite(vid.duration) ? vid.duration.toFixed(1) + " s" : "unknown");
            });
        
            // canplaythrough – likely we can play to the end without pauses
            vid.addEventListener("canplaythrough", function(){
                msg.textContent = "Ready: probably will play without pauses (canplaythrough).";
                playBtn.disabled = false;
            });
        
            vid.addEventListener("playing", function(){
                msg.textContent = "Playback in progress …";
                pauseBtn.disabled = false;
            });
        
            vid.addEventListener("pause", function(){
                msg.textContent = "Playback paused.";
                pauseBtn.disabled = true;
            });
        
            vid.addEventListener("ended", function(){
                msg.textContent = "Video ended.";
                pauseBtn.disabled = true;
            });
        
            playBtn.addEventListener("click", function(){
                vid.play().catch(function(){
                    msg.textContent = "Playback blocked. Try clicking the button again or mute the sound.";
                });
            });
        
            pauseBtn.addEventListener("click", function(){
                vid.pause();
            });
        })();
    </script>
</body>
</html>

RESULT