场景
阿里云:通过生成的带签名的url路径来下载视频。结果一直是播放视频。通过一下方式来达到强制下载视频
当你输入视频的URL并点击“Download Video”按钮时,页面打开了新页面而不是直接下载视频。这是因为现代浏览器在处理包含查询参数(如?Expires=…和&OSSAccessKeyId=…)的URL时,可能会优先考虑打开新页面或直接播放视频,而不是强制下载。
要解决这个问题,你可以尝试以下方法:
方法 1: 设置 Content-Disposition 头(需要后端支持)
最好的方法是从后端设置 Content-Disposition 响应头为 attachment; filename=“filename.mp4”。这将指示浏览器将文件作为附件下载,而不是在浏览器中直接打开。
方法 2: 利用 Blob 和 JavaScript 强制下载
你可以使用 JavaScript 和 Blob 对象来创建一个下载链接,这样可以强制浏览器下载文件,而不是打开新页面播放视频。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Download Video</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 50px;
text-align: center;
}
input[type="text"] {
width: 60%;
padding: 10px;
margin: 20px 0;
font-size: 16px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Download Video</h1>
<p>Enter the video URL below and click the "Download Video" button.</p>
<input type="text" id="videoUrl" placeholder="Enter video URL here" />
<br/>
<button onclick="downloadVideo()">Download Video</button>
<script>
function downloadVideo() {
var url = document.getElementById('videoUrl').value;
if (url) {
fetch(url)
.then(response => response.blob())
.then(blob => {
var downloadLink = document.createElement('a');
var objectURL = URL.createObjectURL(blob);
downloadLink.href = objectURL;
// Extract the filename from the URL
var filename = url.substring(url.lastIndexOf('/') + 1).split('?')[0];
downloadLink.download = filename;
// Append the link to the body and trigger the download
document.body.appendChild(downloadLink);
downloadLink.click();
// Clean up
URL.revokeObjectURL(objectURL);
document.body.removeChild(downloadLink);
})
.catch(error => {
console.error('Error downloading video:', error);
alert('Failed to download the video.');
});
} else {
alert('Please enter a valid video URL.');
}
}
</script>
</body>
</html>
工作原理
Fetch: 使用 fetch API 请求视频文件。这将下载视频内容为一个 Blob 对象。
Blob: Blob 是一个表示二进制数据的对象,可以用来创建对象URL。
Object URL: 通过 URL.createObjectURL(blob) 创建一个临时的对象URL,并赋予下载链接。
下载链接: 将 Blob 对象的URL赋给 <a>
标签的 href,并设置 download 属性来指定下载的文件名。
触发下载: 使用 click 事件自动触发下载操作。
注意事项
这种方法适用于大多数现代浏览器。
当文件较大时,下载可能需要一些时间,因为文件必须先加载到浏览器内存中。
通过这种方法,你可以确保视频文件被下载,而不是直接在浏览器中播放。