HTML5 VIDEO SOURCE FROM XMLHttpRequest

HTML5 VIDEO SOURCE FROM XMLHttpRequest

BY 09 Feb 2018 Web Application Development

Hello everyone,

 

I’m developing a website that downloads a mp4 video file from a service who neeed a token to authenticate user,

and passes it to a <video> element for playback:


tested on chrome and firefox it works fine, on the webbrowser of the SAMSUNG TV LED Ultra HD 4K 65 “UE65KU6100, unfortunately, after setting the source, the background of the <video> block goes black but the video does not start, the loadedmetadata event does not is raised, nothing happens ….

 

my question is, but video playback is supported by using a link in the dataurl format for the source   developer mozilla org/ en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs> ???? ?


here is the example:

 

 

var manageDownload = function (response, token, id) {
     stepBytes = response.result.size / stepNum;
     maxBytes = response.result.size;
     var fileBytes = response.result.size;
     secondiTotali = makeSecondiTotali(response.durationMillis);
     console.log(response, token, id);

     var downloadUrl = ‘[URLDOMAIN]/service/filevideo/’ + id;
 
    var xhr = new XMLHttpRequest();
    xhr.open(‘GET’, downloadUrl);
    xhr.responseType = ‘blob’;
    //xhr.responseType = ‘arraybuffer’;
    xhr.setRequestHeader(‘Authorization’, ‘Bearer ‘ + token);
    xhr.setRequestHeader(‘Range’, ‘bytes=’ + makeStepBytes());
    xhr.onload = function (e) {
    if (this.status == 206 || this.status == 200) {
       rs = response;
       ts = token;
       is = id;
      manageResponseRangeDownload(xhr, response, token, id, OUTPUT_BLOB); //where OUTPUT_BLOB=false
  }
 
  };
  xhr.send();
  }

 

var manageResponseRangeDownload = function(xhr, response, token, id, blobOrDataUrl) {

     $(“.log”).append(‘ DOWNLOAD COMPLETE’);
      var URL = window.URL || window.webkitURL;
 
     avanzamentoByte += xhr.response.size;
     avanzamentoSecondiTotali += (parseInt(avanzamentoByte) / parseInt(maxBytes)) * secondiTotali;

    if (blobOrDataUrl) {
        var url = URL.createObjectURL(xhr.response);
       $(“.log”).append(‘url ‘ + url);
       bindVideo(url, response.result.mimeType);
   } else { 
        blobToDataURL(xhr.response, null).then(function(data) { 
              bindVideo(data, response.result.mimeType);
              //console.log(data);
        }, function() {});
   }
  $(“.log”).append(‘ APPENDED SOURCE’);
}


function blobToDataURL(blob, callback) {
    var deferred = $.Deferred();
    var a = new FileReader();
    a.onload = function(e) {
        if (callback)
            callback(e.target.result);
       deferred.resolve(e.target.result);
   }
   a.readAsDataURL(blob);
   return deferred.promise();
}


var bindVideo = function(url, mime) { // here two methods, no one works, reported here for example
    $(“#videoc”).attr(“src”, url);
    var source = document.createElement(‘source’);
    source.src = url;
    source.type = mime;
    $(“#videoc”)[0].appendChild(source);
    $(“#videoc”)[0].load();
}

 


any help or indication will be appreciated,

thanks in advance.

 

greetings Alldon3

Written by