如何在 JS/React 中下载 mp4 视频？

Question

This might have been asked early, but I am unable to figure it out, please help me and thanks in advance.

Problem:

I have a link to mp4 video (ex: https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4 )

I want to download this video from front end.

I have tried the following method:

 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();

But when I execute this code,

the download will start and fails immediately with error

Failed - No file

Please help me resolve this.

Answer 1

I solved it using following code,

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();

Answer 2

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

let me know if it worked thanks

Answer 3

Such function work for me, but there's a catch:

with that approach ur browser will first store the video in the RAM and when the video is too big it will crash. We're creating a blob here, because a tag download attribute needs the origin to be ur domain, when u test it on localhost and you try to download from another origin it would throw an 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); }); };

To download video without creating a blob it needs to be from ur origin or the server serving it needs to append Content-Disposition and Allow Origin headers, then u can just download it with a with target="_blank" property

Answer 4

Efficient solution, with fetch

const handleDownloadVideo = async () => {
    try {
      const videoUrl = 'https://www.pexels.com/video/1093662/download/';
      const videoRequest = new Request(videoUrl);
      fetch(videoRequest)
        .then(() => {
          const link = document.createElement('a');
          link.href = videoUrl;
          link.setAttribute('download', 'waterfall.mp4');
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        });
    } catch (error) {
      console.error(error);
    }
  };

Note: this answer is similar to one above , but with fetch .