Blob Chopping

by dustinkerstein

CSS

video {
  margin: 0;
  width: 100%;
  height: 100%;
}

JavaScript

var src = "https://files.panomoments.com/hd60fps1x1_dashinit.mp4"
//var src = "https://files.panomoments.com/uhd60fps16x9_dashinit.mp4"
//var src = "https://files.panomoments.com/uhd1frame.mp4"
var video = document.createElement("video");
var blobby;
var urlSrc; 

document.body.appendChild(video);
video.preload = 'none';
video.autoplay = true;
video.muted = true;
video.loop = true;
fetch(src).then(function(response) {
  response.blob().then(function(myBlob) {
  	const mediaStream = new MediaStream();
    mediaStream.addTrack(myBlob);
    video.srcObject = mediaStream;
  	//video.srcObject = myBlob;
  	//blobby = myBlob;
    //urlSrc = window.URL.createObjectURL(blobby); // This must create a copy
    //video.src = urlSrc;
    //setInterval(function() {
      //blobby = new Blob([blobby], {type: "video/mp4"});
      //blobby = null;
      //blobby = new Blob();
      //var prevSrc = urlSrc;
      //urlSrc = window.URL.createObjectURL(blobby);
      //video.src = urlSrc; // Creates a new decoder every single time
      //URL.revokeObjectURL(prevSrc)
      //console.log("chopping", video.src)
    //}, 1000 / 1);
  });
});