我想通过点击下载某些视频。为此,我创建了一个按钮并附加了一个函数,该函数应该触发相关的视频下载。但我只能下载视频的链接,而不是视频。我可以通过外部下载器下载视频,或者简单地将URL拖到浏览器的下载区。但无法通过JavaScript触发该活动。请帮助我。
我尝试了多种方法来解决这个问题:
1.在没有Axios的情况下使用简单的Blob技术:
const blob = new Blob([this.src_url], { type: 'video/mp4' })
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = this.src_url.replace(
>! // 'https://redis-test.com/videos/',
link.click()
URL.revokeObjectURL(link.href)
端点:视频URL作为122字节文件下载
1.然后使用“文件保存程序包”:
var FileSaver = require('file-saver')
console.log(this.src_url)
var blob = new Blob([this.src_url], { type: 'video/mp4' })
FileSaver.saveAs(blob, 'hello world.mp4')
1.然后使用表单方法:
<form method="get" action="file.doc">
<button type="submit">Download!</button>
</form>
端点:视频开始在同一窗口中播放
1.使用href下载属性:
function download(url) {
const a = document.createElement('a')
a.href = url
a.download = url.split('/').pop()
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
}
端点:视频开始在同一窗口中播放
1.使用您的方法:
const link = document.createElement('a')
link.href = url
link.click()
端点:视频开始在相同窗口中播放
1.现在使用Axios默认值:
axios.defaults.withCredentials = true
window.open(
'https://cdn.pixaandom_urlrbay.com/vieo/487508532/Woman%20-%2058142.mp4?rendition=source&expiry=1666842719&hash=7dd6d178d9dbbd8adaf68dafd80c9167e91eca21&download'
)
端点:视频开始在新窗口中播放
1.使用AXIOS在标头中附加一次性内容类型:
axios
.get(
String(nuxtConfig.axios.mediaURL) +
this.src_url.replace(
'https://redisrandom_url.com/videos/',
''
),
{
headers: {
mode: 'no-cors',
referrerPolicy: 'no-referrer',
'Content-Disposition': 'attachment; filename=Woman - 58142.mp4',
Host: 'redis-nfs',
'User-Agent': 'PostmanRuntime/7.29.2',
Accept: '*/*',
'Accept-Language': 'en-US,en;q=0.5',
'Accept-Encoding': 'gzip, deflate, br',
Connection: 'keep-alive',
Cookie:
'tk_or=%22https%3A%2F%2Fwww.google.com%2F%22; tk_lr=%22https%3A%2F%2Fwww.google.com%2F%22; _gcl_au=1.1.954672920.1660108804; _ga=GA1.2.1392122600.1660108808; _fbp=fb.1.1660108809200.1970395787',
'Upgrade-Insecure-Requests': '1',
'Sec-Fetch-Dest': 'document',
'Sec-Fetch-Mode': 'navigate',
'Sec-Fetch-Site': 'none',
'Sec-Fetch-User': '?1',
Pragma: 'no-cache',
'Cache-Control': 'no-cache',
},
}
)
.then((response) => {
console.log(response)
const url = window.URL.createObjectURL(new Blob([response.data]))
const link = document.createElement('a')
link.href = url
link.setAttribute('download', 'title')
document.body.appendChild(link)
link.click()
})
.catch((error) => {
console.log('rex')
})
端点:阻止的跨源请求:同源策略不允许阅读位于redis-random_url/videos/be 319 - 72 e1 - 2 e79 - 8dc 3-bcef 1/...的远程资源。(原因:CORS标头“访问控制-允许-来源”缺失)。状态代码:200
1条答案
按热度按时间vnjpjtjt1#
“......但我只能下载视频的链接,不能下载视频。"
我不使用VueJS,但我怀疑
this.src_url
只是视频URL路径的文本。在HTML5中,你只能下载你服务器上的文件,如果文件是外部的,那么你需要一个PHP脚本(和你的HTML文件在同一个服务器上)来读取这些外部字节到你的JS缓冲区数组中。
应道:
其中,字节阅读可以使用FileReader API或Fetch API完成。
当您可以使用VueJS将文件的字节读入Array时,您的问题就解决了。