Languages

Menu
Sites
Language
HTML5 VIDEO SOURCE FROM XMLHttpRequest

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

Responses

2 Replies
Armaan-Ul- Islam

# As you are accessing remote resource from your Tizen web app, First you have to make sure 'Access to Internet' Privilege and 'Remote Resource Access' Policy is added in the config.xml file of your Tizen app. For details you may check this response on StackOverflow:

https://stackoverflow.com/questions/37783743/not-able-to-connect-proxy-in-tizen-emulator/37960903#37960903

 

# There are Some Code Samples related to Video playing on Tizen TV  on GitHub by Samsung, You might check them out to compare if you are missing something...

https://github.com/Samsung/TizenTVApps

https://github.com/SamsungDForum/PlayerHTML5

GEUNSOO KIM

I think blob or DataUrl are not supported for video/audio playback in Tizen yet.

In case of image files, it works fine to display but I never get work with video or audio files in non-TV platform.

You'd better contact with Samsung TV devs.