JavaScript HTML DOM Dogodki: canplaythrough

Dogodek canplaythrough pomeni, da je medija verjetno dovolj za predvajanje do konca brez čakanja. Za sam začetek je dovolj canplay; canplaythrough je koristen za prikaz “pripravljenosti” na tekoče predvajanje. Dogodek canplaythrough se sproži, ko brskalnik oceni, da je podatkov dovolj za predvajanje do konca brez ustavljanja. Ni 100 % zagotovilo, je pa dober signal za omogočanje gumba “Predvajaj” ali skrivanje indikatorja nalaganja.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8" />
    <title>canplaythrough – verjetno do konca brez ustavljanja</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: canplaythrough</h2>
        
        <video id="vid" controls preload="auto">
            <source src="/video/website.mp4" type="video/mp4">Vaš brskalnik ne podpira videa (MP4).
        </video>
        
        <p id="msg" class="status" aria-live="polite">Nalaganje …</p>
        
        <div class="row">
            <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 playBtn = document.getElementById("playBtn");
            var pauseBtn = document.getElementById("pauseBtn");
            
            vid.addEventListener("loadedmetadata", function(){
                msg.textContent = "Metapodatki naloženi. Trajanje: " +
                (isFinite(vid.duration) ? vid.duration.toFixed(1) + " s" : "neznano");
            });
            
            // canplaythrough: verjetno lahko predvajamo do konca brez ustavljanja
            vid.addEventListener("canplaythrough", function(){
                msg.textContent = "Pripravljeno: verjetno brez ustavljanja (canplaythrough).";
                playBtn.disabled = false;
            });
            
            vid.addEventListener("playing", function(){
                msg.textContent = "Predvajanje v teku …";
                pauseBtn.disabled = false;
            });
            
            vid.addEventListener("pause", function(){
                msg.textContent = "Predvajanje ustavljeno.";
                pauseBtn.disabled = true;
            });
            
            vid.addEventListener("ended", function(){
                msg.textContent = "Konec videa.";
                pauseBtn.disabled = true;
            });
            
            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();
            });
        })();
    </script>
</body>
</html>

REZULTAT