Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Video buffered Property
The HTML DOM Video buffered property returns a TimeRanges object that provides information about the buffered portions of the video. This read-only property helps determine which parts of the video have been downloaded and are ready for playback without interruption.
The TimeRanges object contains information about buffered time ranges, including the length of buffered ranges and their start and end positions in seconds.
Syntax
Following is the syntax for accessing the buffered property −
videoElement.buffered
Return Value
The buffered property returns a TimeRanges object with the following methods −
length − Returns the number of buffered ranges in the video
start(index) − Returns the start time of the buffered range at the specified index
end(index) − Returns the end time of the buffered range at the specified index
Example − Getting Buffered Information
Following example demonstrates how to retrieve buffered time information from a video element −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video buffered Property</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
video {
margin: 20px 0;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 5px;
}
#result {
margin: 20px 0;
padding: 10px;
background-color: #f0f0f0;
border-radius: 5px;
display: inline-block;
}
</style>
</head>
<body>
<h2>Video Buffered Property Demo</h2>
<video id="myVideo" width="400" controls>
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br>
<button onclick="getBufferedInfo()">Get Buffered Info</button>
<button onclick="clearResult()">Clear</button>
<div id="result"></div>
<script>
function getBufferedInfo() {
var video = document.getElementById("myVideo");
var buffered = video.buffered;
var result = document.getElementById("result");
var info = "";
if (buffered.length === 0) {
info = "No buffered ranges available";
} else {
info = "Buffered ranges: " + buffered.length + "<br>";
for (var i = 0; i < buffered.length; i++) {
info += "Range " + (i + 1) + ": " +
buffered.start(i).toFixed(2) + "s - " +
buffered.end(i).toFixed(2) + "s<br>";
}
}
result.innerHTML = info;
}
function clearResult() {
document.getElementById("result").innerHTML = "";
}
</script>
</body>
</html>
The output shows buffered time ranges. Initially, no ranges may be available until the video starts loading −
Before loading: "No buffered ranges available"
After loading: "Buffered ranges: 1
Range 1: 0.00s - 15.34s"
Example − Real-time Buffer Monitoring
Following example shows how to monitor buffering progress in real-time −
<!DOCTYPE html>
<html>
<head>
<title>Real-time Buffer Monitoring</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
text-align: center;
}
video {
margin: 20px 0;
}
.buffer-info {
background-color: #e7f3ff;
padding: 15px;
border-radius: 5px;
margin: 20px auto;
width: 400px;
text-align: left;
}
.progress-bar {
width: 100%;
background-color: #ddd;
border-radius: 4px;
margin: 10px 0;
}
.progress-fill {
height: 20px;
background-color: #4CAF50;
border-radius: 4px;
text-align: center;
line-height: 20px;
color: white;
}
</style>
</head>
<body>
<h2>Real-time Buffer Monitoring</h2>
<video id="video" width="400" controls>
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
<div class="buffer-info">
<h3>Buffer Status:</h3>
<div id="bufferStatus">Click play to start monitoring</div>
<div class="progress-bar">
<div id="bufferProgress" class="progress-fill" style="width: 0%">0%</div>
</div>
</div>
<script>
var video = document.getElementById("video");
var bufferStatus = document.getElementById("bufferStatus");
var bufferProgress = document.getElementById("bufferProgress");
function updateBufferInfo() {
var buffered = video.buffered;
var duration = video.duration;
if (buffered.length > 0 && duration > 0) {
var bufferedEnd = buffered.end(buffered.length - 1);
var percentage = Math.round((bufferedEnd / duration) * 100);
var statusText = "Buffered: " + bufferedEnd.toFixed(1) + "s / " +
duration.toFixed(1) + "s<br>";
statusText += "Ranges: " + buffered.length;
bufferStatus.innerHTML = statusText;
bufferProgress.style.width = percentage + "%";
bufferProgress.textContent = percentage + "%";
}
}
video.addEventListener('progress', updateBufferInfo);
video.addEventListener('loadedmetadata', updateBufferInfo);
</script>
</body>
</html>
This example continuously monitors the buffering progress and displays it as a percentage bar along with detailed buffer information.
Using Buffered Property for Playback Control
The buffered property is useful for implementing smart playback controls that prevent buffering interruptions.
Example − Buffer-aware Playback
<!DOCTYPE html>
<html>
<head>
<title>Buffer-aware Playback</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; padding: 20px; }
video { margin: 20px 0; }
.controls { margin: 20px 0; }
button { padding: 10px 15px; margin: 5px; border: none; border-radius: 5px; cursor: pointer; }
.play-btn { background-color: #4CAF50; color: white; }
.pause-btn { background-color: #f44336; color: white; }
.info { background-color: #fff3cd; padding: 10px; border-radius: 5px; margin: 10px auto; width: 400px; }
</style>
</head>
<body>
<h2>Buffer-aware Playback Control</h2>
<video id="smartVideo" width="400" controls>
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
<div class="controls">
<button class="play-btn" onclick="smartPlay()">Smart Play</button>
<button class="pause-btn" onclick="smartPause()">Pause</button>
</div>
<div id="playbackInfo" class="info">Ready for smart playback</div>
<script>
var video = document.getElementById("smartVideo");
var info = document.getElementById("playbackInfo");
function smartPlay() {
var buffered = video.buffered;
var currentTime = video.currentTime;
if (buffered.length === 0) {
info.innerHTML = "Waiting for video to buffer...";
video.play();
return;
}
// Check if current position is buffered
var isBuffered = false;
for (var i = 0; i < buffered.length; i++) {
if (currentTime >= buffered.start(i) && currentTime <= buffered.end(i)) {
isBuffered = true;
var remaining = buffered.end(i) - currentTime;
info.innerHTML = "Playing - " + remaining.toFixed(1) + "s buffered ahead";
break;
}
}
if (!isBuffered) {
info.innerHTML = "Current position not buffered. May experience interruption.";
}
video.play();
}
function smartPause() {
video.pause();
info.innerHTML = "Playback paused";
}
// Monitor buffering events
video.addEventListener('waiting', function() {
info.innerHTML = "Buffering... Please wait";
});
video.addEventListener('canplay', function() {
info.innerHTML = "Ready to play";
});
</script>
</body>
</html>
This example implements smart playback that checks buffer status before playing and provides feedback about buffered content ahead of the current playback position.
Common Use Cases
The buffered property is commonly used for −
Progress indicators − Showing how much of the video has been downloaded
261 Views
