partial206

by dustinkerstein

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<div id="container"></div>

CSS

.bar {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

JavaScript

var url, container, mesh, video, camera, scene, renderer, texture, material, videoInitialized = false,
  videoSeeked = false,
  isUserInteracting = false,
  myXHR = new XMLHttpRequest(),
  frameSkipper = 5;
  
url = "https://s3.amazonaws.com/files.panomoments.com/100fps_1g_14CRF.mp4";
container = document.getElementById('container');

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);
camera.target = new THREE.Vector3(0, 0, 0);
scene = new THREE.Scene();

video = document.createElement('video');
video.muted = true;
video.autoplay = true;
video.crossOrigin = 'anonymous';
video.setAttribute('webkit-playsinline', 'webkit-playsinline');

var t0 = performance.now();
myXHR.open('GET', url);
myXHR.responseType = 'blob';
myXHR.onprogress = function (e) {
  if (!videoInitialized && myXHR.responseText) {
    console.log("videoInitialized: " + myXHR.responseText);
    videoInitialized = true;
    video.src = window.URL.createObjectURL(myXHR.responseText);
  }
};
myXHR.onload = function(e) {
  var t1 = performance.now();
  console.log("download time: " + (t1-t0));
  video.src = window.URL.createObjectURL(myXHR.response)
};
myXHR.send();

/* var chunk_size = 100000; //100kb chunks

function next_chunk(pos, file_len){
    if(pos > file_len){
        return;
    }
    var chunk_end = pos + chunk_size < file_len ? pos + chunk_size : file_len;
    var xhr = new XMLHttpRequest();
    //xhr.responseType = 'arraybuffer';
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 206){
            file_len = parseInt(xhr.getResponseHeader("Content-Range").split("/")[1]);
            next_chunk(chunk_end + 1, file_len);
        }
    };
    xhr.onload = function(e) {
     if (!videoInitialized) {
        console.log("here")
       videoInitialized = true;
       video.src = window.URL.createObjectURL(xhr.response);
       video.src = window.URL.createObjectURL(xhr.responseText);
     }
    };
    xhr.open("get",...