阿里云oss视频通过url只能播放不能下载的问题

最新推荐文章于 2024-08-27 16:39:19 发布

单线程bug

最新推荐文章于 2024-08-27 16:39:19 发布

阅读量622

点赞数 12

文章标签：音视频 java

本文链接：https://blog.csdn.net/Tt1814964226/article/details/141570175

版权

场景

阿里云：通过生成的带签名的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 事件自动触发下载操作。
注意事项
这种方法适用于大多数现代浏览器。
当文件较大时，下载可能需要一些时间，因为文件必须先加载到浏览器内存中。
通过这种方法，你可以确保视频文件被下载，而不是直接在浏览器中播放。