Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Prefetch videos and store in local storage
<!doctype html>
<html>
<head>
<title>Prefetch video</title>
</head>
<body>
<h1>Prefetch video</h1>
<p>Prefetch a video and know exactly how much is loaded using XHR.</p>
<video controls style="border:1px solid grey;"></video>
<p>Taken from:</p>
<ul id="videos">
</ul>
<script src="q.js"></script>
<script src="largestorage.js"></script>
<script>
var desiredCapacity = 125 * 1024 * 1024;
var storage = new LargeLocalStorage({size: desiredCapacity, name: 'myDb'});
storage.initialized.then(function(grantedCapacity) {
//?
storage.getContents('Files').then(function(content) {
if (content == undefined) {
storage.setContents('Files', "the video files").then(function() {
get_attachments();
});
} else {
get_attachments();
}
});
});
function get_attachments() {
// check attachments
var done = 0;
var i=0;
var file;
for(i=0;i<files.length;i++) {
file = files[i];
!function load(file) {storage.getAttachment('Files', file).then(function(videoFile) {
done = true;
console.log(file+", "+videoFile);
if (videoFile != undefined) {
create_link(file, URL.createObjectURL(videoFile));
} else {
prefetch_and_link(file);
}
})}(file);
}
}
var files = ["movies/1.mp4", "movies/2.mp4"];
var urls = {};
var video = document.querySelector('video');
var videoList = document.getElementById("videos");
function play_video(file) {
video.src = urls[file];
video.play();
}
function create_link(file, url) {
urls[file] = url;
var li = document.createElement("LI");
var a = document.createElement("A");
var label = document.createTextNode(file);
a.appendChild(label);
a.href = "javascript:play_video('"+file+"');";
li.appendChild(a);
videoList.appendChild(li);
}
function prefetch_and_link(file) {
prefetch_file(file,
function(url, file) {
create_link(file, url);
},
function(pc) {
console.log(pc)
});
}
function prefetch_file(url, fetched_callback, progress_callback) {
var prev_pc = 0;
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.addEventListener('load', function(event) {
var status = event.target.status;
if (status === 200) {
var URL = window.URL || window.webkitURL;
var blob_url = URL.createObjectURL(event.target.response);
storage.setAttachment('Files', url, event.target.response).then(function() {
console.log("Added "+url+" to storage");
});
fetched_callback(blob_url, url);
} else {
console.error(event);
}
}, false);
xhr.addEventListener('progress', function(event) {
if (event.lengthComputable) {
var pc = Math.round(event.loaded / event.total * 100);
if (pc !== prev_pc) {
prev_pc = pc;
progress_callback(pc);
}
}
}, false);
xhr.send();
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment