从 URL 下载视频而无需在 chrome 浏览器中打开

Question

I have registered for a course that has roughly 150 videos.

What I have done Uptil NOW:

There is no download button available right now. In order to get the URL of each video file, I have created the script which I run through Console as below:

The site where I am watching these videos is different than the xxxxx marked site. eg I am watching on linkedin learning and video is on lynda,etc.

console.log(("<h2>"+ document.title)+"</h2>"
+
"<a href=\""+document.getElementsByClassName("video-tech")[0].getAttribute("src")+"> click here </a>");
document.getElementsByClassName("video-next-button")[0].click();

an example of output from above code is:

<h2>Overview of QGIS features: Learning QGIS (2015)</h2>
<a href="https://files3.xxxxx.com/secure/courses/383524/VBR_MP4h264_main_SD/383524_01_01_XR15_Overview.mp4?V0lIWk4afWPs3ejN5lxsCi1SIkGKYcNR_F7ijKuQhDmS1sYUK7Ps5TYBcV-MHzdVTujT5p03HP10F_kqzhwhqi38fhOAPnNJz-dMyvA2-YIpBOI-wGtuOjItlVbRUDn6QUWpwe1sRoAl__IA1zmJn3gPvC7Fu926GViqVdLa3oLB0mxRGa7i> click here </a>

I have replaced domain name with xxxxx

This way I can get cover all videos without clicking next (I would like to know if I can automate this process by using some timeout techniques as well) each of this link, when clicked, chrome window looks like below:

this way after clicking 3dots -> Download, I can save video individually.

What I want: Method to save all videos without the need to open individually.

Answer 1

Challenge

To begin with, fetching and saving large binary files is possible when:

• The host server's CORS support is enabled.
• Accessing the host's network from the same site-origin .
• Server-to-Server.

Okay, this would reason why your anchor attempt did not work, in fact, accessing the host's network from your localhost will deny you from accessing the resource's content unless the host server's CORS support is enabled which is unlikely.

Workaround

Alternatively, this will leave us with the other two options, accessing from the same site-origin in particular due to its simplicity, the strategy lies in executing the fetching/saving script from the browser itself, thus, the host server will be gentle with the requests, since they are very similar to the ones coming from the same site.

Steps

1. Go to the site you wish to download the files from (I used https://www.sample-videos.com ).
2. Right-click the web page and select 'Inspect' ( Ctrl + Shift + I ).
3. Finally, switch to the 'Console' tab to start coding.

Code

const downloadVideos = (videos, marker) => {
  // it's important to throttle between requests to dodge performance or network issues
  const throttleTime = 10000; // in milliseconds; adjust it to suit your hardware/network capabilities
  const domain = 'https://www.sample-videos.com'; // site's domain

  if (marker < videos.length) {
    console.log(`Download initiated for video ${videos[marker].name} @ marker:${marker}`);

    const anchorElement = document.createElement('a');

    anchorElement.setAttribute('href', `${domain}${videos[marker].src}`);
    anchorElement.setAttribute('download', videos[marker].name);
    document.body.appendChild(anchorElement);

    // trigger download manually
    anchorElement.click();
    anchorElement.remove();

    marker += 1;
    setTimeout(downloadVideos, throttleTime, videos, marker);
  }
};

// assuming all videos are stored in an array, each video must have 'src' and 'name' attributes
const videos = [
  { src: '/video123/mp4/480/big_buck_bunny_480p_30mb.mp4', name: 'video_480p.mp4' },
  { src: '/video123/mp4/720/big_buck_bunny_720p_1mb.mp4', name: 'video_720p.mp4' }
];

// fireup 
downloadVideos(videos, 0);

... ahem!