0

I am using fetch to download a mp4 file and keeping the result in a blob object using a worker. Something like this:

fetch('http://techslides.com/demos/sample-videos/small.mp4')
  .then(function(response){ 
    response.blob().then(function(blob) {
      self.postMessage(blob);
    });
  })

In the main thread I get the blob and when I print it, this is showed in console:

Blob {size: 383631, type: "video/mp4"}

Then I guess, the video is downloaded fine.

In the main thread, I have a video playing and when it is ended I want to change the source to use the blob I have in memory: (in the code, adBlob is the blob returned by the worker)

    videojs("video").ready(function(){
        this.on('ended', function() {
            if (adBlob) {
                this.pause();
                this.src({
                    type: "video/mp4", 
                    src: URL.createObjectURL(adBlob)
                });
                this.load();
                this.play();
            }
        });

        this.play();
    });

It is not working, I've been reading that could be for permissions, but this case should be for local files. I'm not trying to use a file. In my case the blob is in memory only.

Any ideas? Thanks

Pavel Angel Mendoza Villafane
  • 417
  • 4
  • 21
  • Yes, sounds like permission problem to me, too. Try granting your server 'cross-domain' permission, as mentioned in the answer here: https://stackoverflow.com/questions/58691058/ – David Nov 12 '19 at 01:33
  • `fetch` is not the issue, the video is downloaded in fact and any message of CORS is showed in console – Pavel Angel Mendoza Villafane Nov 12 '19 at 11:33

0 Answers0