Lorsque vous essayez de télécharger des vidéos, la lecture est redirigée vers une nouvelle URL, puis la vidéo commence. « Type de contenu jetable » non reçu du serveur

Question

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

            

Answer 1

Je n'utilise pas VueJS, mais je soupçonne this.src_url que c'est juste le texte du chemin de l'URL de la vidéo.

En HTML5, vous ne pouvez télécharger que les fichiers qui existent sur le serveur. Si le fichier est externe, vous avez besoin d'un script PHP (sur le même serveur que votre fichier HTML) pour relire ces octets externes dans votre tableau de tampons JS.

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

devrait être :

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

La lecture d'octets peut être effectuée à l'aide de l'API FileReader ou de l'API Fetch.

Votre problème est résolu lorsque vous pouvez lire les octets d'un fichier dans un tableau à l'aide de VueJS.