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

Question

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 .

@dandavis No I can't, no error in console, the new video tag is black blank and clicking the play button doesn't do anything(except that the timer increases but the slider doesn't slide) — niceman
– niceman, Commented Apr 27, 2017 at 4:27
sounds like it's possibly still loading when you grab it, or that it is blocked and won't work at all... — dandavis
– dandavis, Commented Apr 27, 2017 at 4:30
@dandavis ok sorry but yes it does play but only when the original video plays and it just follows it — niceman
– niceman, Commented Apr 27, 2017 at 4:30

Akash · Accepted Answer · 2017-05-03 15:39:12Z

2

+100

URL.createObjectURL()

Note: The use of a MediaStream object as an input to this method is in the process of being deprecated. Discussions are ongoing about whether or not it should be removed outright. As such, you should try to avoid using this method with MediaStreams, and should use HTMLMediaElement.srcObject() instead.

Ref : https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL#Browser_compatibility

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject#Browser_compatibility

Code :

function downloadvideo(video) {

var mediaStream = video.captureStream();
//adding a dom element and fetching it in HTMLMediaElement.

HTMLMediaElement.srcObject = mediaStream;
var url = HTMLMediaElement.currentSrc;
const aelem = document.createElement('a');
document.body.appendChild(aelem);
aelem.setAttribute("href",url);
aelem.setAttribute("download","video.mp4");
aelem.click();
//URL.revokeObjectURL(url);

}

See if this works for you.

answered May 3, 2017 at 15:39

Akash

1213 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

niceman Over a year ago

sorry but didn't work, the same thing, thanks anyway :)

Akash Over a year ago

I'll see if there is a workaround possible for this.

CyberAbhay · Accepted Answer · 2017-05-03 08:22:51Z

0

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

answered May 3, 2017 at 8:22

CyberAbhay

5346 silver badges18 bronze badges

1 Comment

niceman Over a year ago

My function is the same as your solution

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related