Wednesday, May 3, 2017

html5 a download attribute doesn't work when the url is a blob url

By Hường Hana 7:00 AM , , Leave a Comment

We're creating a chrome extension to download videos, currently I have this function : 

function downloadvideo(video) {     const url = URL.createObjectURL(video.captureStream());     const aelem = document.createElement('a');     document.body.appendChild(aelem);     aelem.setAttribute("href",url);     aelem.setAttribute("download","video.mp4");     aelem.click();     //URL.revokeObjectURL(url); }

Here video parameter is a html5 video element, I'm using caputreStream because some websites(notably youtube) uses blob url which are revoked apparently So I create a new Blob url from MediaStream.

The function above is executed as part of video's onloadeddata event.

The dialog is shown and the filename is correct but when I click "Save" chrome says "failed : could not find the file".

So how to make it actually work ?

By the way I tried to do ajax against url but chrome refuses with the message : "Cross-origin is only supported for schemes http,https,chrome,chrome-extension" :3 .

2 Answers

Answers 1

Here is is function which i used to download video in bloburl which i stored from canvas frame capture

function createdVideo(){         var output = 'your video or captured stream or canvas capture'           var url = webkitURL.createObjectURL(output);         // output_video.src = url; //toString converts it to a URL via Object URLs, falling back to DataURL         download.href = url;//download is id of download link which als ohave download atribute}

i Hope will work in your case

Answers 2

I am noobie but it worked for me , <a href="#" download> this helps me downloading every kind of file associated with it 'href'

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment