JSFiddle - React, Tailwind, and code Playground

by Jim_Toth

HTML

<video controls="" preload="auto" id="thePlayer"></video>

JavaScript

var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';

xhr.onload = function() {
  
  var reader = new FileReader();
  
  reader.onloadend = function() {
  
    var byteCharacters = atob(reader.result.slice(reader.result.indexOf(',') + 1));
    
    var byteNumbers = new Array(byteCharacters.length);

    for (var i = 0; i < byteCharacters.length; i++) {
      
      byteNumbers[i] = byteCharacters.charCodeAt(i);
      
    }

    var byteArray = new Uint8Array(byteNumbers);
    var blob = new Blob([byteArray], {type: 'video/mp4'});
    var url = URL.createObjectURL(blob);
    
    document.getElementById('thePlayer').src = url;
    
  }
  
  reader.readAsDataURL(xhr.response);
  
};

xhr.open('GET', 'https://www.w3schools.com/html/mov_bbb.mp4');
xhr.send();