Apabila cuba memuat turun beberapa video, ia mengubah hala ke URL baharu dan kemudian video itu mula dimainkan. 'Jenis kandungan boleh guna' tidak diterima daripada pelayan

Question

Saya mahu memuat turun video tertentu dengan satu klik. Untuk melakukan ini, saya mencipta butang dan melampirkan fungsi yang sepatutnya mencetuskan muat turun video yang berkaitan. Tetapi saya hanya boleh memuat turun pautan video, bukan video. Saya boleh memuat turun video menggunakan pemuat turun luaran atau hanya seret URL ke bahagian muat turun penyemak imbas. Tetapi aktiviti itu tidak boleh dicetuskan melalui JavaScript. tolong saya.

Saya mencuba pelbagai cara untuk menyelesaikan isu ini:

1. Gunakan teknologi gumpalan mudah tanpa Axios:

const blob = new Blob([this.src_url], { type: 'video/mp4' })
pautan const = 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)

Titik Akhir: URL Video dimuat turun sebagai fail 122 bait

Kemudian gunakan pakej perlindungan fail: 

 var FileSaver = memerlukan('file-saver')
    console.log(this.src_url)
    var blob = new Blob([this.src_url], { type: 'video/mp4' })
    FileSaver.saveAs(blob, 'hello world.mp4')


Kemudian gunakan kaedah borang: 


   Muat turun!


Titik Tamat: Video mula dimainkan dalam tetingkap yang sama

Gunakan atribut muat turun href: 

muat turun fungsi(url) {
  const a = document.createElement('a')
  a.href = url
  a.muat turun = url.split('/').pop()
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
}
Titik Tamat: Video mula dimainkan dalam tetingkap yang sama

Gunakan kaedah anda: 

const link = document.createElement('a')
link.href = url
link.click()

Titik Tamat: Video mula dimainkan dalam tetingkap yang sama

Kini menggunakan lalai Axios: 

 axios.defaults.withCredentials = benar
     window.open(
       'https://cdn.pixaandom_urlrbay.com/vieo/487508532/Woman%20-%2058142.mp4?rendition=source&expiry=1666842719&hash=7dd6d178d9dbbd8adaf68dafd7109e;
     )

Titik Tamat: Video mula dimainkan dalam tetingkap baharu

Gunakan AXIOS untuk menambahkan jenis kandungan sekali dalam pengepala: 

       .dapat(
         String(nuxtConfig.axios.mediaURL) +
           this.src_url.replace(
             'https://redisrandom_url.com/videos/',
             ''
           ),
         {
           tajuk: {
             mod: 'tiada cors',
             Dasar perujuk: 'tiada perujuk',
             'Content-Disposition': 'attachment; nama fail=Wanita - 58142.mp4',
             Hos: 'redis-nfs',
             'User-Agent': 'PostmanRuntime/7.29.2',
             Terima: '*/*',
             'Bahasa Terima': 'en-AS,en;q=0.5',
             'Terima-Pengekodan': 'gzip, kempis, br',
             Sambungan: 'kekal-hidup',
             kuki:
               'tk_or=%22https%3A%2F%2Fwww.google.com%2F%22; tk_lr=%22https%3A%2F%2Fwww.google.com%2F%22; .1660108808; _fbp=fb.1.1660108809200.1970395787',
             'Upgrade-Insecure-Requests': '1',
             'Sec-Fetch-Dest': 'dokumen',
             'Sec-Fetch-Mode': 'navigasi',
             'Sec-Fetch-Site': 'tiada',
             'Sec-Fetch-User': '?1',
             Pragma: 'tiada cache',
             'Cache-Control': 'no-cache',
           },
         }
       )
       .then((respons) => {
         console.log(respons)

         url const = window.URL.createObjectURL(Blob baharu([response.data]))
         pautan const = document.createElement('a')
         link.href = url
         link.setAttribute('muat turun', 'tajuk')
         document.body.appendChild(pautan)
         link.click()
       })
       .catch((error) => {
         console.log('rex')
       })


Titik Akhir: Permintaan silang asal disekat: Dasar asal yang sama tidak membenarkan membaca sumber jauh di redis-random_url/videos/be319-72e1-2e79-8dc3-bcef1/…. (Punca: pengepala CORS 'Access-Control-Allow-Origin' tiada). Kod status: 200

            

Answer 1

Saya tidak menggunakan VueJS, tetapi saya mengesyaki this.src_url ia hanyalah teks laluan URL video.

Dalam HTML5, anda hanya boleh memuat turun fail yang wujud pada pelayan. Jika fail itu luaran, maka anda memerlukan skrip PHP (pada pelayan yang sama dengan fail HTML anda) untuk membaca bait luaran tersebut kembali ke dalam tatasusunan penimbal JS anda.

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

sepatutnya:

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

Bacaan bait boleh dilakukan menggunakan API FileReader atau API Ambil.

Masalah anda selesai apabila anda boleh membaca bait fail ke dalam tatasusunan menggunakan VueJS.