Skip to content

Instantly share code, notes, and snippets.

Created September 5, 2012 23:57
Show Gist options
  • Star 13 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • 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;
var video;
var index = 0;
video = document.getElementsByTagName('video')[0];
addSourceToVideo( video, "", "video/ogv");
addSourceToVideo( video, "", "video/mp4");
video.addEventListener("progress", progressHandler,false);
progressHandler = function(e) {
if( video.duration ) {
var percent = (video.buffered.end(0)/video.duration) * 100;
console.log( percent );
if( percent >= 100 ) {
Copy link

I'll just leave this here:

Copy link

what does bindKeys() do?

Copy link

jlubeck commented Oct 19, 2015

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

Copy link

Not working with my iOS device and safari too..

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:

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