当 url 是 blob url 时，html5 下载属性不起作用

Posted 2023-05-07

【中文标题】当 url 是 blob url 时，html5 下载属性不起作用

【英文标题】：html5 a download attribute doesn't work when the url is a blob url

【发布时间】：2017-09-20 21:44:13

【问题描述】：

我们正在创建一个 chrome 扩展来下载视频，目前我有这个功能：

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);

这里的video 参数是一个html5 视频元素，我使用caputreStream 因为一些网站（尤其是youtube）使用明显被撤销的blob url 所以我从MediaStream 创建一个新的Blob url。

上述函数作为视频onloadeddata 事件的一部分执行。

显示对话框并且文件名正确，但是当我单击“保存”时，chrome 显示“失败：找不到文件”。

那么如何让它真正起作用呢？

顺便说一句，我尝试对 url 进行 ajax，但 chrome 拒绝了以下消息：“跨源仅支持方案 http、https、chrome、chrome-extension”：3。

【问题讨论】：

你能在新的视频标签中播放临时视频网址吗？

@dandavis 不，我不能，控制台没有错误，新的视频标签是黑色空白，点击播放按钮没有任何作用（除了计时器增加但滑块没有幻灯片）

当你抓住它时它可能仍在加载，或者它被阻止并且根本无法工作......

@dandavis 好的抱歉，但它确实会播放，但只有在原始视频播放并且它只是跟随它时才会播放

@dandavis 并且音频听起来是重复的 :)

【参考方案1】：

URL.createObjectURL()

注意：使用 MediaStream 对象作为此方法的输入正在被弃用。关于是否应该彻底删除它的讨论正在进行中。因此，您应该尽量避免将此方法用于 MediaStreams，而应使用 HTMLMediaElement.srcObject()。

参考：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

代码：

功能下载视频（视频）

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);

看看这是否适合你。

【讨论】：

对不起，没用，同样的事情，还是谢谢 :)

我看看有没有办法解决这个问题。

【参考方案2】：

这是我用来下载我从画布帧捕获中存储的 bloburl 视频的功能

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

我希望对你有用

【讨论】：

我的功能和你的方案一样