当尝试下载某些视频时,它会重定向到新的 URL,然后视频开始播放。未从服务器收到“一次性内容类型”
P粉578343994
P粉578343994 2023-08-28 09:24:28
[Vue.js讨论组]

我想通过点击下载某些视频。为此,我创建了一个按钮并附加了一个应触发相关视频下载的函数。 但我只能下载视频的链接,而不能下载视频。我可以使用外部下载器下载视频,或者只需将 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/be319-72e1-2e79-8dc3-bcef1/… 处的远程资源。 (原因:CORS 标头“Access-Control-Allow-Origin”丢失)。状态码:200


P粉578343994
P粉578343994

全部回复(1)
P粉388945432

我不使用 VueJS,但我怀疑 this.src_url 只是视频 URL 路径的文本

在 HTML5 中,您只能下载服务器上存在的文件。如果文件是外部的,那么您需要一个 PHP 脚本(与您的 HTML 文件在同一服务器上)将这些外部字节读回到您的 JS 缓冲区数组中。

const blob = new Blob([this.src_url], { type: 'video/mp4' })

应该是:

let myBytes = //# update variable with data result of reading files bytes
let myBlob = new Blob(  [ Uint8Array.from( myBytes ) ] , {type: "application/octet-stream"} );

可以使用 FileReader API 或 Fetch API 完成字节读取。

当您可以使用 VueJS 将文件的字节读取到数组中时,您的问题就解决了。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号