Es posible que se haya preguntado esto antes, pero no puedo resolverlo, por favor ayúdenme y gracias de antemano.
Problema:
Tengo un enlace a un video mp4 (por ejemplo: https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4 )
Quiero descargar este video desde el front-end.
He probado el siguiente método:
const videoHref ='https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4'; const a = Object.assign(document.createElement('a'), { href: videoHref, style: 'display: none', download: 'video.mp4' }); document.body.appendChild(a); a.click(); a.remove();Pero cuando ejecuto este código,
la descarga comenzará y falla inmediatamente con error
Error - No hay archivo
Por favor ayúdame a resolver esto.
fetch('https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4', { method: 'GET', headers: { 'Content-Type': 'application/mp4', }, }) .then((response) => response.blob()) .then((blob) => { const url = window.URL.createObjectURL( new Blob([blob]), ); const link = document.createElement('a'); link.href = url; link.setAttribute( 'download', `FileName.pdf`, ); document.body.appendChild(link); link.click(); link.parentNode.removeChild(link); });avisame si funciono gracias
Lo resolví usando el siguiente código,
let xhr = new XMLHttpRequest(); xhr.open('GET', 'path/videoLink', true); xhr.responseType = 'blob'; xhr.onload = function () { let urlCreator = window.URL || window.webkitURL; let videoUrl = urlCreator.createObjectURL(this.response); let tag = document.createElement('a'); tag.href = videoUrl; tag.target = '_blank'; tag.download = skillName.includes('.mp4') ? skillName : skillName + '.mp4'; document.body.appendChild(tag); tag.click(); document.body.removeChild(tag); }; xhr.onerror = (err) => {}; xhr.send();Tal función funciona para mí, pero hay un problema:
con ese enfoque, su navegador primero almacenará el video en la RAM y cuando el video sea demasiado grande, se bloqueará. Estamos creando un blob aquí, porque un atributo de descarga de etiqueta necesita que el origen sea su dominio, cuando lo prueba en localhost e intenta descargar desde otro origen, arrojaría un error.
const downloadVideo = (urls: string) => { axios({ url, method: 'GET', responseType: 'blob', }).then((response) => { const urlObject = window.URL.createObjectURL(new Blob([response.data])); const link = document.createElement('a'); link.href = urlObject; link.setAttribute('download', 'recording.mp4'); document.body.appendChild(link); link.click(); document.body.removeChild(link); }); };Para descargar video sin crear un blob, debe ser de su origen o el servidor que lo atiende debe agregar los encabezados Disposición de contenido y Permitir origen, luego puede descargarlo con una propiedad target="_blank"