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
XMLHttpRequest for Video Tag?
XMLHttpRequest can be used to fetch video data as a blob and display it in HTML5 video elements. This approach is useful for loading video content programmatically or handling binary video data.
Basic XMLHttpRequest with Blob
First, let's understand how to send binary data using XMLHttpRequest with a Blob object:
<script>
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.onload = function (event) {
console.log("Upload complete");
};
// Create a blob with text data
var blob = new Blob(['demo content'], {type: 'text/plain'});
xhr.send(blob);
</script>
Loading Video with XMLHttpRequest
To fetch video data and create a playable video element, set the responseType to "blob" and create an object URL:
<!DOCTYPE html>
<html>
<head>
<title>XMLHttpRequest Video Loading</title>
</head>
<body>
<video id="videoPlayer" controls width="400">
Your browser does not support the video tag.
</video>
<script>
function loadVideo() {
var xhr = new XMLHttpRequest();
var videoElement = document.getElementById('videoPlayer');
xhr.open('GET', '/sample-video.mp4', true);
xhr.responseType = 'blob';
xhr.onload = function() {
if (xhr.status === 200) {
// Create object URL from blob response
var blobUrl = URL.createObjectURL(xhr.response);
// Create source element and set src
var source = document.createElement('source');
source.src = blobUrl;
source.type = 'video/mp4';
videoElement.appendChild(source);
// Clean up object URL when video loads
videoElement.onloadeddata = function() {
URL.revokeObjectURL(blobUrl);
};
}
};
xhr.onerror = function() {
console.error('Failed to load video');
};
xhr.send();
}
// Load video when page loads
loadVideo();
</script>
</body>
</html>
Complete Example with Error Handling
Here's a more robust example with progress tracking and error handling:
<!DOCTYPE html>
<html>
<head>
<title>Advanced Video Loading</title>
</head>
<body>
<div>
<button onclick="loadVideoWithProgress()">Load Video</button>
<div id="progress"></div>
</div>
<video id="myVideo" controls width="500" style="display:none;"></video>
<script>
function loadVideoWithProgress() {
var xhr = new XMLHttpRequest();
var video = document.getElementById('myVideo');
var progressDiv = document.getElementById('progress');
xhr.open('GET', '/demo-video.mp4', true);
xhr.responseType = 'blob';
// Track download progress
xhr.onprogress = function(event) {
if (event.lengthComputable) {
var percentComplete = (event.loaded / event.total) * 100;
progressDiv.innerHTML = 'Loading: ' + Math.round(percentComplete) + '%';
}
};
xhr.onload = function() {
if (xhr.status === 200) {
var blobUrl = URL.createObjectURL(xhr.response);
// Set video source directly
video.src = blobUrl;
video.style.display = 'block';
progressDiv.innerHTML = 'Video loaded successfully!';
// Clean up when done
video.addEventListener('loadeddata', function() {
URL.revokeObjectURL(blobUrl);
});
}
};
xhr.onerror = function() {
progressDiv.innerHTML = 'Error loading video';
};
xhr.send();
}
</script>
</body>
</html>
Key Points
- responseType: Set to "blob" for binary video data
- URL.createObjectURL(): Creates a URL for the blob data
- URL.revokeObjectURL(): Clean up to prevent memory leaks
- Error handling: Always handle network errors and loading failures
Browser Compatibility
XMLHttpRequest with blob response type is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. For older browsers, consider using polyfills or alternative approaches.
Conclusion
XMLHttpRequest with blob handling provides a powerful way to load video content programmatically. Remember to set the correct responseType and clean up object URLs to prevent memory leaks.
576 Views
