tluyben · March 10, 2015 11:05
diff --git a/prefetch.html b/prefetch.html
 <!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>

 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();
 }

 for(var i=0;i<files.length;i++) { 
  var file = files[i];
  console.log(file);
  prefetch_file(file,
    function(url, file) {
      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(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);
      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>
	<!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>

	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();
	}

	for(var i=0;i<files.length;i++) {
	var file = files[i];
	console.log(file);
	prefetch_file(file,
	function(url, file) {
	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(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);
	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>