&引用；“另存为视频”；但是如何用javascript和html来代替呢？

当你有一个直接链接到一个视频，你通常可以右击，鼠标菜单将出现。到达后，您将看到

将视频另存为

。如果你点击它，它会将视频下载到你的电脑上

我想要相同的功能，但我想在HTML页面上创建一个按钮，当您单击该按钮时，将执行与上述完全相同的操作

我该怎么做

让我们看看这个例子： 我有这个链接：

如果继续并右键单击视频，您将看到以下内容：

单击“将视频另存为”，您将获得：

这是一个用于将视频保存到本地存储器中的对话框

现在我的问题是我想通过点击一个html按钮来完成这一切。 我想打开保存对话框，而不必打开视频本身并右键单击等等。有办法吗

html a标记下载属性不起作用。我试过像这样使用URI

<a href='"data:application/octet-stream,"+encodeURIComponent(`https://invidious.fdn.fr/latest_version?id=NF_69Dyle1Y&raw&itag=22`)' download="video.mp4">download video</a>

但是它也不起作用。

如果您的视频与您的网页位于同一位置（不是您的案例）

非常简单，不需要Javascript，并且

---

如果您的视频来自其他来源（您的案例） 在测试我的解决方案时，我发现出于安全目的，跨源下载被阻止

A.如果你控制服务器 如果服务器实现了proprer CORS，或者如果您可以控制服务器并可以添加这些CORS，那么您可以使用我无耻地从以下脚本中获取的脚本：

var a=document.getElementById（“下载链接”）；
函数下载资源（url、文件名）{
//对于浏览器，当前blob大小限制约为500MB
如果（！filename）filename=url.split（'\\'）.pop（）.split（'/'）.pop（）；
获取（url{
标题：新标题({
“Origin”：location.Origin
}),
模式：“cors”
})
.then（response=>response.blob（））
.然后（blob=>{
让blobUrl=window.URL.createObjectURL（blob）；
//将资源放在链接的href中
a、 href=blob；
//奖励：仅在Javascript代码执行时显示链接
a、 style.display=“inline”；
})
.catch（e=>console.error（e））；
}
下载资源（“https://invidious.fdn.fr/latest_version?id=NF_69Dyle1Y&raw&itag=22");

我添加了一个小功能，将保持链接隐藏，直到文件完全下载。当然，您可以根据自己的要求进行更改

B如果你不能控制服务器 如果它使用CORS并允许所有源代码（或者至少是您的源代码），那么上面的脚本应该可以工作

---

不幸的是，如果不是这样，你就不走运了。您仍然可以在新窗口中打开视频，并告诉用户右键单击并手动“另存为”；它不那么整洁，但至少它能工作。

这些链接中的一个能回答你的问题吗？不，下载属性不起作用。（这只是三个链接中的一个；第二个使用数据URI，第三个使用blob）请在结束我的问题之前给我一些时间检查它们。别担心，我什么都没做（我甚至不确定我是否有这种能力，因为我是一个新手）。如果其他链接都不起作用，请提供有关您尝试的内容和结果的详细信息。答案很好，但不幸的是，我无法控制服务器。谢谢你的回答。

<a href="/path/to/video.mp4" download="video">Download</a>

<!-- The style="display:none;" is optional, you can remove it if you don't want the feature explained below. -->
<a id="download-link" href="javascript:alert('The video is not yet ready!')" download="video" style="display:none;">Download</a>
<script>

var a = document.getElementById("download-link");

function downloadResource(url, filename) {

  // Current blob size limit is around 500MB for browsers
  if (!filename) filename = url.split('\\').pop().split('/').pop();
  fetch(url, {
      headers: new Headers({
        'Origin': location.origin
      }),
      mode: 'cors'
    })
    .then(response => response.blob())
    .then(blob => {
      let blobUrl = window.URL.createObjectURL(blob);

      // Place the resource in the href of the link
      a.href = blob;

      // Bonus : Only show the link if and when the Javascript code has executed
      a.style.display = "inline";
    })
    .catch(e => console.error(e));

}

downloadResource("https://invidious.fdn.fr/latest_version?id=NF_69Dyle1Y&raw&itag=22");

</script>