JavaScript HTML DOM Events: loadstart

The loadstart event signals that the browser has started loading a media resource (video/audio). It is typically used to display a loading state or activate a “loading” indicator. The first frame becomes available at loadeddata, and playback can begin at canplay.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>loadstart – start of loading</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: loadstart</h2>
        
        <video id="vid" controls preload="metadata" poster="/demo/narava2.avif">
            <source src="/video/website.mp4" type="video/mp4">Your browser does not support video (MP4).
        </video>
        
        <p id="msg" class="status" aria-live="polite">Ready. Click “Load” to start loading.</p>
        
        <div class="row">
            <button id="loadBtn" type="button">Load</button>
            <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 loadBtn = document.getElementById("loadBtn");
            var playBtn = document.getElementById("playBtn");
            var pauseBtn = document.getElementById("pauseBtn");
            
            function updateButtons() {
                // readyState >= 3 means enough data to start playing
                playBtn.disabled = !(vid.readyState >= 3);
                pauseBtn.disabled = vid.paused || vid.ended;
            }
            
            // loadstart – loading begins
            vid.addEventListener("loadstart", function () {
                msg.textContent = "Loading started (loadstart)…";
            });
            
            // First frame is available
            vid.addEventListener("loadeddata", function () {
                msg.textContent = "First frame loaded (loadeddata).";
            });
            
            // Enough data to start playback
            vid.addEventListener("canplay", function () {
                msg.textContent = "You can start playing (canplay).";
                updateButtons();
            });
            
            vid.addEventListener("playing", function () {
                msg.textContent = "Playback in progress …";
                updateButtons();
            });
            
            vid.addEventListener("pause", function () {
                if (!vid.ended) msg.textContent = "Playback paused.";
                updateButtons();
            });
            
            vid.addEventListener("ended", function () {
                msg.textContent = "End of video.";
                updateButtons();
            });
            
            // Button actions
            loadBtn.addEventListener("click", function () {
                // Force a fresh load – this triggers loadstart again
                vid.load();
                msg.textContent = "Requesting load …";
            });
            
            playBtn.addEventListener("click", function () {
                vid.play().catch(function () {
                    msg.textContent = "Playback blocked. Try clicking the button or mute the sound.";
                });
            });
            
            pauseBtn.addEventListener("click", function () {
                vid.pause();
            });
            
            // Initial button state
            updateButtons();
        })();
    </script>
</body>
</html>

RESULT