Can It play a blob file?

Should the player be able to play a blob file?

I am trying to download 2 vimeo clips from my vimeo account both with vanilla XHR and with axios, then make them into their respective blob in order to have 'em ready to play without having to load first. I need really quick response and no loading time.

So when I call this.load(url), can url be a blob file?

At the moment, I can’t make it work. Here is the code that I have to fetch the clips. With axios:

  const endpoint = '/oembed.json';

  function fetchRessource(url) {
    return axios(endpoint, {
      method: 'GET',
      baseURL: 'https://vimeo.com/api/',
      params: { url: url, },
      responseType: 'blob',
      onDownloadProgress: event => console.log('Downloading... -> ', event)
    })
      .then(blob => { return blobUtil.createObjectURL(new Blob([blob])) })
      .catch(err => `Could not create the objectURL from the arrayBuffer - ${err}`); // IE10+
  }

  return axios.all([
    fetchRessource(url1),
    fetchRessource(url2)
  ])
  .then(axios.spread((url1, url2) => {
    return [url1, url2];
  }));

This gives me back the blobURLs but throws this when I am trying to play them: onError Event {isTrusted: true, type: "error", target: video, currentTarget: video, eventPhase: 2…}bubbles: falsecancelBubble: falsecancelable: truecomposed: falsecurrentTarget: nulldefaultPrevented: falseeventPhase: 0isTrusted: truepath: Array[10]returnValue: truesrcElement: videotarget: videotimeStamp: 9187.02type: "error"__proto__: Event Looks like a Media error: code 4

With XHR:

function loadIt(file) {
  const req = new XMLHttpRequest();
  req.onload = () => { return URL.createObjectURL(req.response) };
  req.open("GET", file);
  req.setRequestHeader('Access-Control-Allow-Origin', '*');
  req.responseType = "blob";
  req.send();
}

This throws another error and is not even able to get anything from the server: XMLHttpRequest cannot load https://vimeo.com/187265782/83876b2cdc. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

[cookpete]

@x-yuri ReactPlayer will fall back to the FilePlayer if it cannot play the URL with other players. Playing blobs should still work. It works for me in this fiddle using URL.createObjectURL():

https://jsfiddle.net/0pn9avov/

[cookpete]

I would simply render three ReactPlayers with the question and answer clips all loaded (with playing set to false for the answer clips), then just hide/show/play the relevant player depending on the answer. You would be waiting the same amount of time (probably longer) to load in blob strings compared to waiting for each iframe to call onReady.