A Home-made Video Download Helper (Client + Server) – Simple way to Download Videos

About 2 months ago, I have created an online tool https://weibomiaopai.com that helps to analyse the real video URL behind some popular video resources e.g. youtube, tumblr, instagram etc.

The idea behind the web tool is to use Ajax to contact 3 powerful API servers. The advantage is that you can focus on the URL-parsing algorithms on the server without touch a single line of code in the client. And the users will be using the latest API instantly without having to upgrade their client software.

Later, The Chrome Extension (Video Download Helper) comes out, which is the client software and it is luckily updated by Chrome WebStore at regular basis. It is a handy tiny tool that does not take too much the users’ space (a tiny icon and less than 1MB resources files). It helps to get the real video URL of the current active tab without having to visit the online tool.

video-download-helper-chrome-extension

However, it does not improve the accuracy. For some video sites, the PHP crawler is hard or nearly impossible to see the useful HTML as the logged-in users see. So it makes it hard for remote servers to parse the real video URLs without being actually logged-in to the site.

It is still possible, but harder to let the bots log in with the official APIs (but they usually require manual approval and are rate limited). Some proposes simulating crawling the user login page and prepare the cookie data. But both methods are not easy.

Video Client Parser

It turns out that with Chrome Extension, it is easy to get the HTML string of arbitrary video URLs without having to worry about the Ajax same-origin policy. You just have to give your extension “all-urls” permission and it is good to go.

For example, the following JS snippet is the core piece of code that downloads the Instagram video.

1
2
3
4
5
6
7

// instagram
if (!ValidURL(video_url)) {
    video_dom = document.querySelector("meta[property='og:video:secure_url']");
    if (video_dom) {
        video_url = video_dom.getAttribute("content");
    }
}

// instagram
if (!ValidURL(video_url)) {
    video_dom = document.querySelector("meta[property='og:video:secure_url']");
    if (video_dom) {
        video_url = video_dom.getAttribute("content");
    }
}

With the Client + Server approach, I believe this tiny Chrome Extension will be very much useful and powerful. Currently, it supports Youtube, Instagram, Tumblr, and so many more!

Relevant Video Download Posts

• How to Download Any Videos in Chrome Browser and Merge Video Segments?
• How to Solve 403 Forbidden Error (Denied by Referer ACL) when Downloading Weibo Video?
• VideoDownloader Update: New UI, d.tube and steemit video URL parser, code refactoring!
• VideoDownloader Update: VIP Feature of Server Video Parser
• How to Download Tumblr Posts?
• A Home-made Video Download Helper (Client + Server)
• The Simple Video .m3u8 Downloader/Parser in PHP and Javascript
• How to Download Instagram Videos using PHP and Javascript?
• How to Download Video via Workflow APP?
• The TED Video Downloader
• Adding `Image Download List` to the Popular `VideoDownloadHelper` Chrome Extension

You may also like: 说说我那复活的视频下载插件

–EOF (The Ultimate Computing & Technology Blog) —