当url是blob url时,html5下载属性不起作用应该怎么解决?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (16038)

我们正在创建一个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所以我创建了一个新的Blob网址MediaStream

上面的功能是作为视频onloadeddata事件的一部分执行的。

显示的对话框和文件名是正确的,但当我点击“保存”时表示“失败:找不到文件”。

那么如何让它实际工作?

顺便说一下,我试图做一个Ajax反对,chrome给出"Cross-origin is only supported for schemes http,https,chrome,chrome-extension"。

提问于
用户回答回答于

URL.createObjectURL()

注意:使用MediaStream对象作为此方法的输入正在被弃用。正在讨论是否应该彻底删除它。因此,应该尽量避免在MediaStream中使用此方法,而应该使用HTMLMediaElement.srcObject()。

代码:

功能downloadvideo(视频){

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

}

用户回答回答于

这是我用来下载视频的功能,我从画布帧捕获存储的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}

所属标签

可能回答问题的人

  • 人生的旅途

    10 粉丝484 提问6 回答
  • 无聊至极

    4 粉丝504 提问6 回答
  • 富有想象力的人

    4 粉丝0 提问4 回答
  • 找虫虫

    2 粉丝0 提问4 回答

扫码关注云+社区

领取腾讯云代金券