HTML 5 Video Buffering a certain portion of a longer video

The TimeRanges object in HTML5 allows you to work with buffered portions of video and audio elements. It represents a series of non-overlapping time ranges that have been buffered by the browser.

TimeRanges Properties

The TimeRanges object provides the following properties:

• length ? Number of buffered time ranges
• start(index) ? Start time of a specific range, in seconds
• end(index) ? End time of a specific range, in seconds

Accessing Buffered Ranges

You can access buffered ranges using the buffered property of video or audio elements:

<video id="myVideo" controls>
    <source src="/assets/videos/sample.mp4" type="video/mp4">
</video>

<script>
let video = document.getElementById('myVideo');

video.addEventListener('progress', function() {
    let buffered = video.buffered;
    
    console.log('Number of buffered ranges:', buffered.length);
    
    // Check each buffered range
    for (let i = 0; i < buffered.length; i++) {
        console.log(`Range ${i}: ${buffered.start(i)}s - ${buffered.end(i)}s`);
    }
});
</script>

Example: Monitoring Buffer Progress

<video id="videoPlayer" controls width="400">
    <source src="/assets/videos/demo.mp4" type="video/mp4">
</video>
<div id="bufferInfo"></div>

<script>
let video = document.getElementById('videoPlayer');
let info = document.getElementById('bufferInfo');

video.addEventListener('progress', function() {
    let buffered = video.buffered;
    let duration = video.duration;
    
    if (buffered.length > 0) {
        let bufferedEnd = buffered.end(buffered.length - 1);
        let percentBuffered = (bufferedEnd / duration) * 100;
        
        info.innerHTML = `
            <p>Buffered: ${bufferedEnd.toFixed(2)}s of ${duration.toFixed(2)}s</p>
            <p>Progress: ${percentBuffered.toFixed(1)}%</p>
        `;
    }
});
</script>

Practical Buffer Check Function

<script>
function checkBufferStatus(videoElement) {
    let buffered = videoElement.buffered;
    let currentTime = videoElement.currentTime;
    
    // Check if current position is buffered
    for (let i = 0; i < buffered.length; i++) {
        if (currentTime >= buffered.start(i) && currentTime <= buffered.end(i)) {
            return {
                isBuffered: true,
                rangeStart: buffered.start(i),
                rangeEnd: buffered.end(i)
            };
        }
    }
    
    return { isBuffered: false };
}

// Usage example
let video = document.querySelector('video');
video.addEventListener('timeupdate', function() {
    let status = checkBufferStatus(video);
    if (status.isBuffered) {
        console.log(`Current position buffered from ${status.rangeStart}s to ${status.rangeEnd}s`);
    }
});
</script>

Key Points

• Buffered ranges may be non-continuous due to seeking behavior
• Use the progress event to monitor buffer changes
• Always check if duration is available before calculating percentages
• Buffer information helps implement custom loading indicators

Conclusion

The TimeRanges object provides essential information about buffered video content. Use it to create better user experiences by showing buffer progress and ensuring smooth playback.