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
P粉578343994
2023-08-28 09:24:28
<p>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.</p>
<p>Saya mencuba pelbagai cara untuk menyelesaikan isu ini: </p>
<ol>
<li>Gunakan teknologi gumpalan mudah tanpa Axios: </li>
</ol>
<pre class="brush:js;toolbar:false;">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)
</pra>
<p>Titik Akhir: URL Video dimuat turun sebagai fail 122 bait</p>
<ol start="2">
<li>Kemudian gunakan pakej perlindungan fail: </li>
</ol>
<pre class="brush:js;toolbar:false;"> 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')
</pra>
<ol start="3">
<li>Kemudian gunakan kaedah borang: </li>
</ol>
<pre class="brush:html;toolbar:false;"><form method="get" action="file.doc">
<button type="submit">Muat turun!</button>
</form>
</pra>
<p>Titik Tamat: Video mula dimainkan dalam tetingkap yang sama</p>
<ol start="4">
<li>Gunakan atribut muat turun href: </li>
</ol>
<pre class="brush:js;toolbar:false;">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)
}</pra>
<p>Titik Tamat: Video mula dimainkan dalam tetingkap yang sama</p>
<ol start="5">
<li>Gunakan kaedah anda: </li>
</ol>
<pre class="brush:js;toolbar:false;">const link = document.createElement('a')
link.href = url
link.click()
</pra>
<p>Titik Tamat: Video mula dimainkan dalam tetingkap yang sama</p>
<ol start="6">
<li>Kini menggunakan lalai Axios: </li>
</ol>
<pre class="brush:js;toolbar:false;"> axios.defaults.withCredentials = benar
window.open(
'https://cdn.pixaandom_urlrbay.com/vieo/487508532/Woman%20-%2058142.mp4?rendition=source&expiry=1666842719&hash=7dd6d178d9dbbd8adaf68dafd7109e;
)
</pra>
<p>Titik Tamat: Video mula dimainkan dalam tetingkap baharu</p>
<ol start="7">
<li>Gunakan AXIOS untuk menambahkan jenis kandungan sekali dalam pengepala: </li>
</ol>
<pre class="brush:js;toolbar:false;">
.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')
})
</pra>
<blockquote>
<p>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</p>
</blockquote><p><br /></p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Saya tidak menggunakan VueJS, tetapi saya mengesyaki
this.src_urlia 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.