특정 비디오를 다운로드하려고 하면, 새로운 URL 로 리다이렉트 되어 비디오의 재생이 개시됩니다.

by

클릭 한 번으로 특정 동영상을 다운로드하고 싶습니다.이를 위해 Button을 만들고 관련 동영상 다운로드를 트리거하는 기능을 첨부했습니다.그러나 동영상의 링크만 다운로드 할 수 있고 동영상은 다운로드 할 수 없습니다.외부 다운로더로 동영상을 다운로드하거나 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)

엔드포인트: 122바이트의 파일로 다운로드되는 비디오 URL

  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. AX를 사용한 헤더에 일회용 콘텐츠유형을 첨부IOS:
 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



질문에 대한 답변