JavaScript HTML DOM Dogodki: loadstart

Dogodek loadstart pove, da je brskalnik začel nalagati medij (video/audio). Pogosto ga uporabiš za prikaz stanja ali vklop “loading” indikacije. Prva sličica bo na voljo ob loadeddata, začetek predvajanja pa ob canplay.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>loadstart – začetek nalaganja</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;">Dogodek: loadstart</h2>
        
        <video id="vid" controls preload="metadata" poster="/demo/narava2.avif">
            <source src="/video/website.mp4" type="video/mp4">Vaš brskalnik ne podpira videa (MP4).
        </video>
        
        <p id="msg" class="status" aria-live="polite">Pripravljeno. Klikni “Naloži” za začetek nalaganja.</p>
        
        <div class="row">
            <button id="loadBtn" type="button">Naloži</button>
            <button id="playBtn" type="button" disabled>Predvajaj</button>
            <button id="pauseBtn" type="button" disabled>Ustavi</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 pomeni dovolj podatkov za začetek predvajanja
                playBtn.disabled = !(vid.readyState >= 3);
                pauseBtn.disabled = vid.paused || vid.ended;
            }
            
            // loadstart: začetek nalaganja
            vid.addEventListener("loadstart", function(){
                msg.textContent = "Nalaganje se je začelo (loadstart)…";
            });
            
            // Informativno: prvi okvir je na voljo
            vid.addEventListener("loadeddata", function(){
                msg.textContent = "Prvi okvir je naložen (loadeddata).";
            });
            
            // Ko je dovolj za začetek predvajanja
            vid.addEventListener("canplay", function(){
                msg.textContent = "Lahko začneš predvajati (canplay).";
                updateButtons();
            });
            
            vid.addEventListener("playing", function(){
                msg.textContent = "Predvajanje v teku …";
                updateButtons();
            });
            
            vid.addEventListener("pause", function(){
                if (!vid.ended) msg.textContent = "Predvajanje ustavljeno.";
                updateButtons();
            });
            
            vid.addEventListener("ended", function(){
                msg.textContent = "Konec videa.";
                updateButtons();
            });
            
            // Gumbi
            loadBtn.addEventListener("click", function(){
                // Ponovno zahtevaj nalaganje – sproži loadstart
                vid.load();
                msg.textContent = "Pošiljam zahtevo za nalaganje …";
            });
            
            playBtn.addEventListener("click", function(){
                vid.play().catch(function(){
                    msg.textContent = "Predvajanje blokirano. Poskusi klikniti gumb ali utišati zvok.";
                });
            });
            
            pauseBtn.addEventListener("click", function(){
                vid.pause();
            });
            
            // Začetno stanje
            updateButtons();
        })();
    </script>
</body>
</html>

REZULTAT