"Save As Video" 但如何用 javascript 和 html 代替呢？
"Save As Video" but how to do it with javascript and html instead?
当您直接 link 一个视频时，您通常可以右击然后会出现鼠标菜单。到达那里后，您会看到 Save Video As。如果您单击它，它会将视频下载到您的计算机。
我想要相同的功能，但我想在 HTML 页面上创建一个按钮，当您单击该按钮时，它会执行与上述完全相同的操作。
我该怎么做？
我们来看这个例子：
我有这个 link：https://invidious.fdn.fr/latest_version?id=NF_69Dyle1Y&raw&itag=22
如果您继续并右键单击视频，您将看到：
点击 "Save Video As" 你会得到：
这是一个用于将视频保存到本地存储的对话框。
现在我的问题是我想通过单击 html 按钮来完成所有这些操作。
我希望打开保存对话框，而不必继续播放视频本身并右键单击等等。有办法吗？
html 标签下载属性不起作用。我试过像这样使用 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>
但它也不起作用。
如果您的视频与您的网页位于同一origin （不是您的情况）
<a href="/path/to/video.mp4" download="video">Download</a>
相当简单，不需要Javascript和works on every browser except IE。
如果您的视频来自其他来源（您的情况）
在测试我的解决方案时，我发现出于安全目的，Chrome and Firefox 阻止了跨源下载。
一个。如果你控制服务器
如果服务器实现了适当的 CORS，或者如果您可以控制服务器并可以添加这些 CORS，则可以使用我无耻地从 中获取的脚本：
<!-- 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>
我添加了一个小功能，可以在文件完全下载之前保持 link 隐藏。您当然可以根据您的要求进行更改。
b。如果您不控制服务器
如果它使用 CORS 并允许所有来源（或至少你的来源），上面的脚本应该可以工作。
如果没有，很遗憾，您就不走运了。您仍然可以在新的 window 中打开视频，并告诉用户右键单击并手动 "Save As"；它不太整洁，但至少它有效。
当您直接 link 一个视频时，您通常可以右击然后会出现鼠标菜单。到达那里后，您会看到 Save Video As。如果您单击它，它会将视频下载到您的计算机。
我想要相同的功能，但我想在 HTML 页面上创建一个按钮，当您单击该按钮时，它会执行与上述完全相同的操作。
我该怎么做？
我们来看这个例子： 我有这个 link：https://invidious.fdn.fr/latest_version?id=NF_69Dyle1Y&raw&itag=22
如果您继续并右键单击视频，您将看到：
点击 "Save Video As" 你会得到：
这是一个用于将视频保存到本地存储的对话框。
现在我的问题是我想通过单击 html 按钮来完成所有这些操作。 我希望打开保存对话框，而不必继续播放视频本身并右键单击等等。有办法吗？
html 标签下载属性不起作用。我试过像这样使用 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>
但它也不起作用。
如果您的视频与您的网页位于同一origin （不是您的情况）
<a href="/path/to/video.mp4" download="video">Download</a>
相当简单，不需要Javascript和works on every browser except IE。
如果您的视频来自其他来源（您的情况）
在测试我的解决方案时，我发现出于安全目的，Chrome and Firefox 阻止了跨源下载。
一个。如果你控制服务器
如果服务器实现了适当的 CORS，或者如果您可以控制服务器并可以添加这些 CORS，则可以使用我无耻地从
<!-- 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>
我添加了一个小功能，可以在文件完全下载之前保持 link 隐藏。您当然可以根据您的要求进行更改。
b。如果您不控制服务器
如果它使用 CORS 并允许所有来源（或至少你的来源），上面的脚本应该可以工作。
如果没有，很遗憾，您就不走运了。您仍然可以在新的 window 中打开视频，并告诉用户右键单击并手动 "Save As"；它不太整洁，但至少它有效。