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