Skip to content

Instantly share code, notes, and snippets.

@chrisallick
Created September 5, 2012 23:57
Show Gist options
  • Save chrisallick/3648116 to your computer and use it in GitHub Desktop.
Save chrisallick/3648116 to your computer and use it in GitHub Desktop.
Force preload of video in HTML5
function addSourceToVideo(element, src, type) {
var source = document.createElement('source');
source.src = src;
source.type = type;
element.appendChild(source);
}
var video;
var index = 0;
$(document).ready(function(){
video = document.getElementsByTagName('video')[0];
addSourceToVideo( video, "http://video-js.zencoder.com/oceans-clip.ogv", "video/ogv");
addSourceToVideo( video, "http://video-js.zencoder.com/oceans-clip.mp4", "video/mp4");
video.addEventListener("progress", progressHandler,false);
bindKeys();
});
progressHandler = function(e) {
if( video.duration ) {
var percent = (video.buffered.end(0)/video.duration) * 100;
console.log( percent );
if( percent >= 100 ) {
console.log("loaded!");
}
video.currentTime++;
}
}
@toddpi314
Copy link

I'll just leave this here: http://stackoverflow.com/a/26986581/1195652

@kirtan-shah
Copy link

what does bindKeys() do?

@jlubeck
Copy link

jlubeck commented Oct 19, 2015

Not working on Firefox. It just hangs in some random percentage. Any idea what might be wrong?

@WillXing
Copy link

Not working with my iOS device and safari too..

@josephrocca
Copy link

josephrocca commented Jun 19, 2017

I haven't tested this, but my guess as to why it isn't working is this: the progress event fires up to 3 times per second, but more than 1 second may have downloaded per progress event. So video.currentTime++ should really be video.currentTime = video.buffered.end(0) or maybe video.currentTime = video.buffered.end(0) - 0.01 since we probably don't want to seek right to the edge just in case it triggers a fresh stream. Have a look at this SO answer for more details: https://stackoverflow.com/a/5182578/993683

So better code might look like this (again, untested):

let video = document.createElement('video');
video.src = 'video.mp4';
video.autoPlay = true;
video.onprogress = () => this.currentTime = this.buffered.end(0) - 0.01;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment