HTML में ब्राउज़र मीडिया डेटा प्राप्त करते समय स्क्रिप्ट कैसे निष्पादित करें?

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

onprogress एट्रिब्यूट HTML में मीडिया तत्व (<audio>, <video>) डेटा डाउनलोड होने के दौरान आवधिक रूप से फायर होता है। यह मीडिया लोडिंग प्रगति दिखाने के लिए उपयोगी है।

उदाहरण

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

<!DOCTYPE html>
<html>
<body>
    <h2>वीडियो लोडिंग प्रगति</h2>
    <video id="myVideo" width="320" height="176" controls onprogress="updateProgress()">
        <source src="/html5/foo.ogg" type="video/ogg">
        <source src="/html5/foo.mp4" type="video/mp4">
        आपका ब्राउज़र HTML5 वीडियो का समर्थन नहीं करता।
    </video>
    <p id="progress">लोड हो रहा है...</p>
    
    <script>
        function updateProgress() {
            var video = document.getElementById('myVideo');
            var buffered = video.buffered;
            var progress = document.getElementById('progress');
            
            if (buffered.length > 0) {
                var loaded = buffered.end(buffered.length - 1);
                var duration = video.duration;
                var percent = (loaded / duration * 100).toFixed(1);
                progress.innerHTML = 'बफर्ड: ' + percent + '% (' + loaded.toFixed(1) + 's / ' + duration.toFixed(1) + 's)';
            }
        }
    </script>
</body>
</html>

मीडिया लोडिंग इवेंट्स क्रम

उन्नत प्रगति बार

<video id="video" src="movie.mp4" controls></video>
<div class="progress-container">
    <div id="progress-bar" class="progress-bar"></div>
    <div id="buffer-bar" class="buffer-bar"></div>
</div>

<style>
.progress-container { width: 100%; height: 6px; background: #ddd; border-radius: 3px; position: relative; }
.progress-bar { height: 100%; background: #007bff; border-radius: 3px; width: 0%; }
.buffer-bar { height: 100%; background: rgba(0,123,255,0.3); border-radius: 3px; position: absolute; top: 0; left: 0; width: 0%; }
</style>

<script>
const video = document.getElementById('video');
const progressBar = document.getElementById('progress-bar');
const bufferBar = document.getElementById('buffer-bar');

video.addEventListener('timeupdate', () => {
    progressBar.style.width = (video.currentTime / video.duration * 100) + '%';
});

video.addEventListener('progress', () => {
    if (video.buffered.length > 0) {
        const bufferedEnd = video.buffered.end(video.buffered.length - 1);
        bufferBar.style.width = (bufferedEnd / video.duration * 100) + '%';
    }
});
</script>