如何使用JavaScript下载视频

Question

我正在为 Google Chrome 开发视频下载扩展，这是我的第一个项目（也是我第一次制作 Chrome 扩展程序）。根据我的了解，应该使用 JavaScript 来实现扩展的功能。

我想要实现以下功能：当我在某个网站上看到视频播放器时，我希望能够让用户下载该视频。我认为Video Downloader Plus与我的目的相关。那么，我应该如何使用户能够执行以上功能呢？

- iLiA

---

请将您的问题明确地表达为一个简洁的问题，并展示一下您已经尝试过的内容。 - Sebastian Speitel

@SebastianSpeitel，就像我说的一样，我不知道如何使用JavaScript从任何网站下载视频，所以我想要提示或示例。 - iLiA

这是一个非常广泛的主题，可能也非常复杂。首先要检查其他扩展的代码，你可以在开发工具中轻松完成。同时学习如何使用开发工具来方便调试不同上下文的扩展程序。 - wOxxOm

是的，但我该如何检查它？ - iLiA

Answer 1

<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问题，则添加以下内容。这将仅在下载图像和视频时有效。

- Mohaimen Khalid

---

经过测试，使用大小为120Mb以上的mp4和flv文件，这对视频也绝对有效。 - Evhz

Answer 2

使用JavaScript查看用户的DOM。

获取页面上所有的标签...

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以及嵌入视频。

- Max Alexander Hanna

---

是的，我知道听起来很无聊，但我只是想要一个提示。谢谢您。顺便说一句，我是JS开发人员，但Chrome扩展是对我来说新的挑战。 - iLiA

Answer 3

以下是如何使用Fetch API和Promise：

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/

- Elijah Mock