<p>Ich möchte bestimmte Videos mit einem Klick herunterladen. Dazu habe ich einen Button erstellt und eine Funktion angehängt, die den Download des entsprechenden Videos auslösen soll. Ich kann aber nur den Link des Videos herunterladen, nicht das Video. Ich kann das Video mit einem externen Downloader herunterladen oder einfach die URL in den Download-Bereich des Browsers ziehen. Die Aktivität kann jedoch nicht über JavaScript ausgelöst werden. Bitte hilf mir.</p> <p>Ich habe mehrere Möglichkeiten ausprobiert, um dieses Problem zu lösen: </p> <ol> <li>Einfache Blob-Technologie ohne Axios nutzen: </li> </ol> <pre class="brush:js;toolbar:false;">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) </pre> <p>Endpunkt: Die Video-URL wird als 122-Byte-Datei heruntergeladen</p> <ol start="2"> <li>Dann verwenden Sie das Dateischutzpaket: </li> </ol> <pre class="brush:js;toolbar:false;"> 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') </pre> <ol start="3"> <li>Dann verwenden Sie die Formularmethode: </li> </ol> <pre class="brush:html;toolbar:false;"><form method="get" action="file.doc"> <button type="submit">Herunterladen!</button> </form> </pre> <p>Endpunkt: Die Videowiedergabe beginnt im selben Fenster</p> <ol start="4"> <li>Verwenden Sie das href-Download-Attribut: </li> </ol> <pre class="brush:js;toolbar:false;">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) }</pre> <p>Endpunkt: Die Videowiedergabe beginnt im selben Fenster</p> <ol start="5"> <li>Verwenden Sie Ihre Methode: </li> </ol> <pre class="brush:js;toolbar:false;">const link = document.createElement('a') link.href = URL link.click() </pre> <p>Endpunkt: Die Videowiedergabe beginnt im selben Fenster</p> <ol start="6"> <li>Verwendet jetzt den Axios-Standard: </li> </ol> <pre class="brush:js;toolbar:false;"> axios.defaults.withCredentials = true window.open( „https://cdn.pixaandom_urlrbay.com/vieo/487508532/Woman%20-%2058142.mp4?rendition=source&expiry=1666842719&hash=7dd6d178d9dbbd8adaf68dafd80c9167e91eca21&download“ ) </pre> <p>Endpunkt: Video wird in neuem Fenster abgespielt</p> <ol start="7"> <li>Verwenden Sie AXIOS, um einen einmaligen Inhaltstyp im Header anzuhängen: </li> </ol> <pre class="brush:js;toolbar:false;"> .erhalten( String(nuxtConfig.axios.mediaURL) + this.src_url.replace( „https://redisrandom_url.com/videos/“, '' ), { Überschriften: { Modus: 'no-cors', referrerPolicy: 'no-referrer', 'Content-Disposition': 'attachment; filename=Frau - 58142.mp4', Host: 'redis-nfs', 'User-Agent': 'PostmanRuntime/7.29.2', Akzeptieren: '*/*', 'Accept-Language': 'en-US,en;q=0.5', 'Accept-Encoding': 'gzip, deflate, br', Verbindung: 'Keep-Alive', Kekse: 'tk_or=%22https%3A%2F%2Fwww.google.com%2F%22; tk_lr=%22https%3A%2F%2Fwww.google.com%2F%22; _ga=GA1.2.1392122600 .1660108808; _fbp=fb.1.1660108809200.1970395787', 'Upgrade-Insecure-Requests': '1', 'Sec-Fetch-Dest': 'Dokument', 'Sec-Fetch-Mode': 'navigate', 'Sec-Fetch-Site': 'none', 'Sec-Fetch-User': '?1', Pragma: 'kein Cache', 'Cache-Control': 'no-cache', }, } ) .then((response) => { console.log(Antwort) 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') }) </pre> <blockquote> <p>Endpunkt: Cross-Origin-Anfrage blockiert: Die Same-Origin-Richtlinie erlaubt kein Lesen der Remote-Ressource unter redis-random_url/videos/be319-72e1-2e79-8dc3-bcef1/…. (Ursache: CORS-Header „Access-Control-Allow-Origin“ fehlt). Statuscode: 200</p> </blockquote><p><br /></p>

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"} );