HTML में फ़ाइल बफ़रिंग के बिना अंत तक चलने योग्य होने पर स्क्रिप्ट कैसे निष्पादित करें?

oncanplaythrough इवेंट एट्रिब्यूट

oncanplaythrough एट्रिब्यूट HTML में तब फायर होता है जब ब्राउज़र अनुमान लगाता है कि मीडिया (ऑडियो/वीडियो) बफ़रिंग के लिए रुके बिना शुरुआत से अंत तक चल सकता है। यह canplay से अधिक विश्वसनीय संकेतक है।

उदाहरण

निम्नलिखित कोड oncanplaythrough एट्रिब्यूट का उपयोग दिखाता है:

<!DOCTYPE html>
<html>
<body>
    <h2>वीडियो तैयार स्थिति</h2>
    <video id="myVideo" width="400" height="200" controls oncanplaythrough="onReady()">
        <source src="/html5/foo.ogg" type="video/ogg">
        <source src="/html5/foo.mp4" type="video/mp4">
        आपका ब्राउज़र वीडियो तत्व का समर्थन नहीं करता।
    </video>
    <p id="status">लोड हो रहा है...</p>
    
    <script>
        function onReady() {
            document.getElementById('status').innerHTML = 
                '✅ वीडियो बफ़रिंग के बिना पूरा चलाने के लिए तैयार है!';
            document.getElementById('status').style.color = 'green';
            
            // स्वचालित प्लेबैक शुरू कर सकते हैं (यदि नीति अनुमति दे)
            // video.play().catch(e => console.log('ऑटोप्ले अवरुद्ध:', e));
        }
    </script>
</body>
</html>

मीडिया तैयार स्थिति इवेंट्स

readyState प्रॉपर्टी

इवेंट्स के अलावा, readyState प्रॉपर्टी वर्तमान स्थिति देती है:

const video = document.getElementById('myVideo');

console.log(video.readyState); // 0-4
// 0: HAVE_NOTHING - कोई जानकारी नहीं
// 1: HAVE_METADATA - मेटाडेटा उपलब्ध
// 2: HAVE_CURRENT_DATA - वर्तमान फ्रेम उपलब्ध
// 3: HAVE_FUTURE_DATA - वर्तमान और अगला फ्रेम उपलब्ध
// 4: HAVE_ENOUGH_DATA - पूरा चलाने के लिए पर्याप्त (canplaythrough)

व्यावहारिक पैटर्न: लोडिंग इंडिकेटर

<video id="video" src="movie.mp4" controls></video>
<div id="loading" class="loading-overlay">
    <div class="spinner"></div>
    <p>वीडियो तैयार हो रहा है...</p>
</div>

<style>
.loading-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7); color: white;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity 0.3s, visibility 0.3s;
}
.loading-overlay.hidden { opacity: 0; visibility: hidden; }
.spinner { border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
</style>

<script>
const video = document.getElementById('video');
const loading = document.getElementById('loading');

video.addEventListener('canplaythrough', () => {
    loading.classList.add('hidden');
});

video.addEventListener('waiting', () => {
    loading.classList.remove('hidden');
});
</script>