Chrome 如何使用JavaScript下载视频

xzlaal3s  于 2023-02-27  发布在  Go
关注(0)|答案(3)|浏览(187)

我正在为谷歌浏览器的视频下载器扩展工作,这是我的第一个项目(我是第一次使浏览器扩展)。正如我所知道的,你应该使用JavaScript的功能扩展。
我希望执行以下操作:我在一些网站上有一些视频播放器,我想让用户下载的视频。我认为Video Downloader Plus是有关我的目的。那么我如何让用户做以上功能?

sg3maiej

sg3maiej1#

使用JavaScript查看用户的DOM。
取页面上<embed>的任何内容...

document.getElementsByTagName("embed")

这通常是一个视频播放器。嵌入标签有一个URL,使用JavaScript解析嵌入标签中写入的URL,你就有了你的视频URL。如果你使用JavaScript导航到一个页面,你就可以有效地下载它。
例如,如果您使用

window.location.href = 'VIDEO URL';

你可以下载视频。嵌入式代码示例:

<embed width="420" height="315"
    src="https://www.youtube.com/embed/tgbNymZ7vqY">

请注意:现在人们通常使用iframe把视频放到页面上:

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

因此,也许您的代码应该能够解析像iframe中的YouTube URL以及嵌入式视频这样的内容。

w9apscun

w9apscun2#

<button onclick="downloadImage()">Download Image</button>
function downloadImage() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://via.placeholder.com/150', true);
  xhr.responseType = 'blob';
  xhr.onload = function() {
    var urlCreator = window.URL || window.webkitURL;
    var imageUrl = urlCreator.createObjectURL(this.response);
    var tag = document.createElement('a');
    tag.href = imageUrl;
    tag.target = '_blank';
    tag.download = 'sample.png';
    document.body.appendChild(tag);
    tag.click();
    document.body.removeChild(tag);
  };
  xhr.onerror = err => {
    alert('Failed to download picture');
  };
  xhr.send();
}

如果你看到cors的问题,然后添加它将只与图像和视频下载

2wnc66cl

2wnc66cl3#

下面介绍如何使用Promise将其与Fetch API配合使用:

export async function download(url) {
    return new Promise((res, rej) => {
        fetch(url).then(res => res.blob()).then(file => {
            const tempUrl = URL.createObjectURL(file);
            const aTag = document.createElement("a");
            aTag.href = tempUrl;
            aTag.download = url.replace(/^.*[\\\/]/, '');
            document.body.appendChild(aTag);
            aTag.click();
            URL.revokeObjectURL(tempUrl);
            aTag.remove();
            res();
        }).catch(err => {
            rej(err);
        });
    });
}

来源:https://www.codingnepalweb.com/download-file-from-url-with-javascript/

相关问题