Video Playing With Loading Checks

by Ben Clayton

JavaScript

function init() {
	  var t;
	  console.log(t = (new Date()).getTime())
	  var video = document.createElement("VIDEO");
	  video.preload = "auto";

	  video.addEventListener("suspend", function(e) {
	    console.log((new Date()).getTime() - t, "[suspend event] readystate ", video.readyState);
	    if (video.readyState == 4) {
	      console.log((new Date()).getTime() - t, "Finished loading of video via network");
	    } else {
	      console.log((new Date()).getTime() - t, "video from cache");
      }
      video.play();
	  });

  video.addEventListener("loadstart", function(e) {
	    console.log((new Date()).getTime() - t, "[loadstart event] readystate ", video.readyState);
	  });

	  video.addEventListener("ended", function(e) {
	    console.log((new Date()).getTime() - t, "[ended event] readystate ", video.readyState);
	  });

	  video.addEventListener("error", function(e) {
	    console.log((new Date()).getTime() - t, "[error event] error ", video.error);
	  });

	  // Set 'src' after event handlers have been attached, so you can catch any early events
	  var source = document.createElement("SOURCE");
	  source.src = "https://ia800209.us.archive.org/24/items/WildlifeSampleVideo/Wildlife.xmp4?unique=1";
	  video.appendChild(source);
	  document.body.appendChild(video); // appendChild is a js method not a jquery method

	}


	init();