Je souhaite télécharger certaines vidéos en un clic. Pour ce faire, j'ai créé un bouton et attaché une fonction qui doit déclencher le téléchargement de la vidéo concernée. Mais je ne peux télécharger que le lien de la vidéo, pas la vidéo. Je peux télécharger la vidéo à l'aide d'un téléchargeur externe ou simplement faire glisser l'URL dans la section téléchargements du navigateur. Mais l'activité ne peut pas être déclenchée via JavaScript. S'il vous plaît aidez-moi.

J'ai essayé plusieurs façons de résoudre ce problème :

1. Utiliser une technologie blob simple sans Axios :

const blob = new Blob([this.src_url], { type : 'video/mp4' }) lien const = document.createElement('a') lien.href = URL.createObjectURL(blob) lien.download = this.src_url.replace( > ! // 'https://redis-test.com/videos/', lien.cliquez() URL.revokeObjectURL(lien.href) ≪/pré> 
Point de terminaison : l'URL de la vidéo est téléchargée sous forme de fichier de 122 octets
 
 
Utilisez ensuite le package de protection de fichiers : 
 
 
 var FileSaver = require('file-saver') console.log(this.src_url) var blob = nouveau Blob([this.src_url], { type : 'video/mp4' }) FileSaver.saveAs(blob, 'bonjour le monde.mp4') ≪/pré> 
 
Utilisez ensuite la méthode du formulaire : 
 
 
 Télécharger !  ≪/pré> 
Point final : la lecture de la vidéo commence dans la même fenêtre
 
 
Utilisez l'attribut de téléchargement href : 
 
 
function download(url) { const a = document.createElement('a') a.href = URL a.download = url.split('/').pop() document.body.appendChild(a) a.cliquez() document.body.removeChild(a) }≪/pré> 
Point final : la lecture de la vidéo commence dans la même fenêtre
 
 
Utilisez votre méthode : 
 
 
const link = document.createElement('a') lien.href = url lien.cliquez() ≪/pré> 
Point final : la lecture de la vidéo commence dans la même fenêtre
 
 
Utilise désormais la valeur par défaut d'Axios : 
 
 
 axios.defaults.withCredentials = true fenêtre.open( 'https://cdn.pixaandom_urlrbay.com/vieo/487508532/Woman%20-%2058142.mp4?rendition=source&expiry=1666842719&hash=7dd6d178d9dbbd8adaf68dafd80c9167e91eca21&download' ) ≪/pré> 
Point final : la lecture de la vidéo commence dans une nouvelle fenêtre
 
 
Utilisez AXIOS pour ajouter un type de contenu unique dans l'en-tête : 
 
 
 .obtenir( Chaîne (nuxtConfig.axios.mediaURL) + this.src_url.replace( 'https://redisrandom_url.com/videos/', '' ), { en-têtes : { mode : 'sans cors', referrerPolicy : 'non-référent', 'Content-Disposition' : 'pièce jointe ; nom de fichier=Femme - 58142.mp4', Hôte : 'redis-nfs', 'Agent utilisateur' : 'PostmanRuntime/7.29.2', Accepter: '*/*', 'Accepter-Langue' : 'en-US,en;q=0.5', 'Accept-Encoding' : 'gzip, deflate, br', Connexion : 'keep-alive', Biscuits: '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 ; .1660108808 ; _fbp=fb.1.1660108809200.1970395787', 'Demandes de mise à niveau non sécurisées' : '1', 'Sec-Fetch-Dest' : 'document', 'Sec-Fetch-Mode' : 'naviguer', 'Sec-Fetch-Site' : 'aucun', 'Sec-Fetch-Utilisateur' : '?1', Pragma : « sans cache », 'Cache-Control' : 'pas de cache', }, } ) .then((réponse) => { console.log (réponse) const url = window.URL.createObjectURL(new Blob([response.data])) lien const = document.createElement('a') lien.href = url link.setAttribute('télécharger', 'titre') document.body.appendChild(lien) lien.cliquez() }) .catch((erreur) => { console.log('rex') }) ≪/pré> 
 
Point de terminaison : requête d'origine croisée bloquée : la stratégie de même origine ne permet pas de lire la ressource distante sur redis-random_url/videos/be319-72e1-2e79-8dc3-bcef1/…. (Cause : l'en-tête CORS 'Access-Control-Allow-Origin' est manquant). Code d'état : 200