Get the video file from a web link without the need to launch a Chrome browser

Question

Get the video file from a web link without the need to launch a Chrome browser

Currently, I am enrolled in a course that consists of around 150 videos.

Progress Update:

At the moment, there is no option to download these videos directly. To retrieve the URL for each video file, I have developed a script that I execute through the Console as shown below:

The platform where I am viewing these videos differs from the site where they are hosted (e.g., watching on LinkedIn Learning but videos are on Lynda).

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 output from the code above 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 masked the domain name with 'xxxxx'.

This method allows me to obtain all video links without manually clicking next (exploring ways to automate this process using timeout techniques). Each link opens in Chrome as depicted below:

https://i.sstatic.net/9KeUj.png After clicking the three dots -> Download, I can save the video files individually.

Desired Outcome: Seeking a method to batch save all videos without the need to open each one separately.

javascript google-chrome download console html5-video

Answer 1

Answer №1

Problem

When it comes to downloading and storing large binary files, there are certain requirements that need to be met:

The host server must have CORS support enabled.
Accessing the host's network must be done from the same site-origin.
Server-to-Server communication might also work.

If you attempted to download content from your localhost and it didn't work, it's likely because accessing the host's network is restricted unless CORS support is enabled on the server side.

Solution

In this scenario, the best workaround would be to either access the content from the same site-origin or use a Server-to-Server approach. Accessing the content from the same site-origin involves running the fetching/saving script directly in the browser, making the requests seem more legitimate to the server.

Instructions

Visit the website where the files are hosted (e.g., ).
Right-click on the webpage and choose 'Inspect' (Ctrl + Shift + I).
Switch to the 'Console' tab in the Developer Tools to start coding.

Script

const downloadVideos = (videos, marker) => {
  const throttleTime = 10000;
  const domain = 'https://www.sample-videos.com';

  if (marker < videos.length) {
    console.log(`Downloading 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);

    anchorElement.click();
    anchorElement.remove();

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

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' }
];

downloadVideos(videos, 0);

Happy Downloading!

Answer 2

Problem

When it comes to downloading and storing large binary files, there are certain requirements that need to be met:

The host server must have CORS support enabled.
Accessing the host's network must be done from the same site-origin.
Server-to-Server communication might also work.

If you attempted to download content from your localhost and it didn't work, it's likely because accessing the host's network is restricted unless CORS support is enabled on the server side.

Solution

In this scenario, the best workaround would be to either access the content from the same site-origin or use a Server-to-Server approach. Accessing the content from the same site-origin involves running the fetching/saving script directly in the browser, making the requests seem more legitimate to the server.

Instructions

Visit the website where the files are hosted (e.g., ).
Right-click on the webpage and choose 'Inspect' (Ctrl + Shift + I).
Switch to the 'Console' tab in the Developer Tools to start coding.

Script

const downloadVideos = (videos, marker) => {
  const throttleTime = 10000;
  const domain = 'https://www.sample-videos.com';

  if (marker < videos.length) {
    console.log(`Downloading 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);

    anchorElement.click();
    anchorElement.remove();

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

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' }
];

downloadVideos(videos, 0);

Get the video file from a web link without the need to launch a Chrome browser

Answer №1

Problem

Solution

Instructions

Script

Happy Downloading!

Similar questions

Disable or set input text to read-only in Internet Explorer 9 and earlier versions using JavaScript or jQuery

Setting up an express server to host my optimized webpack production website

What is the best way to retrieve a value by using the data.get() method?

Ways to verify the functionality of a webpage once it has been loaded on my local machine's browser

The JavaScript value of the button text once it has been modified

Unable to create properties for a class that is being exported

What is the best way to download a file without interference from automated

Master the art of fetching response data from an API and implementing a function to process the data and generate desired outputs using Node.js and JavaScript

The NicEditor is malfunctioning due to a ReferenceError with the variable bkLib

Sorting by alphabetical order using Vue.js and Axios

Steps for unloading or replacing a JQuery script when the useragent is identified as IE6

Tips for displaying the number of selected values in a select box label (e.g. Choose an Option)

Having trouble with Vue component registration repeatedly failing

Working with external data in D3.js involves loading and manipulating datasets efficiently

The functionality of "#button_1" remains unchanged despite using .click() or .hover() methods

Discovering nested documents in MongoDB using JavaScript

dynamically inserting new data fields and calculating cumulative total

What is the process for configuring NextJS to recognize and handle multiple dynamic routes?

Utilizing jQuery's then() method to display HTML and JSON outputs from printing operations

What is the process for displaying the following text after deleting the particle text?