copy() + wget + cmdV

Off the line

The one where I learn’t you could copy to the clipboard in the console.

There are a whole bunch of really great learning resources online that are all reasonably priced for what they offer, but not all of them allow their paying users to download video content for the courses that they pay for. Places like Tutsplus, Frontend Masters and Pluralsight have excellent video courses, but you have to be online to be able to view them. Some places allow you to pay a higher subscription rate to get access to a download of the videos, others require you to install a separate app (depending on the device). To get the desktop app on a mac you get faced with :

Install Silverlight? Nah

I don’t really want to install Silverlight, so that I can install your app, so that I can have offline versions of the course.

I do appreciate the effort that goes into creating this education and think that paying the price to access most of this content is well worth it, but I really think that the ability to download a video tutorial and keep it should be part of that price. There are plenty of other similar places online that produce quality courses that also allow you to download the videos after you’ve payed to access the content, so why not these?

That was something of a rhetorical question, I guess the answer is that they either want to offer something to a higher paying subscription level or that they worry that people will just download their videos and re-upload them somewhere else for people who don’t buy them directly to get access to them, it just kind of `irks` me that as someone who pays for something, I can’t have access to it, can’t stick it on a external HDD, transfer it to my phone or just simply watch it offline.

I know its the age-old DRM argument over again, I get it, its YOUR content and you should be able to control it to some extent. Some sites (such as Pluralsight) offer an additional app that allow you to do a lot of this, and that is a nice touch, but thats still just trying to retain some level of control to access. What if someone can only access your content on a computer that won’t allow them to install an app? But they could just right-click and download the video and save it to a USB drive? Maybe their only internet access is at a Internet Cafe or Library?

Sure, this is probably a small minority of cases and I am certainly NOT one of those people, but I found myself wanting to download a bunch of videos to watch on a plane recently and was really bothered that it wasn’t as simple as it should be.

So — lets get to the point.


WARNING! Beyond here I’m going to say and do some things that are pretty much against most Terms of Service (I think) for these sites and a lot of people will have a lot of opinions about if it’s a good or bad thing. I get it. Also, nothing I am doing is groundbreaking by any means.


I noticed that most of these sites than ran subscriptions used Wistia, it allows business to use HTML5 video with fallbacks and behind paywalls etc. Almost all of them used it. HTML5 video tags require a src.

Open up the inspector (right-click is either disabled or has its own context-menu) and look for the video element.

video element

Now, I could just copy the src attribute, open another tab, paste the link and go directly to the source mp4, at that point I would have the usual access to the right-click, save-as menu. But that was a bit too long for me. I needed to find a quicker way.

After looking at a few videos in the same course, I noticed that the video element always had the same ID. I guess they just re-used the video component and swapped out the src attribute for each video — makes sense. This changes from site to site, but usually remains the same on each site.

So now I knew that I could just open the console, do a little

document.getElementByID(ID).getAttribute('src')

and get a string returned in the console. This way I have removed one step (I no longer had to dig around in the elements panel to find it).

To shorten it even more I found that you can actually just copy directly to the system clipboard from the console using the copy function.

copy(document.getElementById(‘vjs_video_3_html5_api’).getAttribute(‘src’))

So now I could just have the console, tap up to repeat the last command and then have the link ready to paste. Still, removing that last step of opening up a tab, pasting, loading, right clicking and saving would help.

Thats where wget comes in.

You might not have used wget before but its pretty useful for things like grabbing a whole directory of images or files from a server.

So, after I have copied my link, I can navigate to a terminal and just do —

wget -O FILENAMETOSAVEAS.mp4 LINKTOTHEVIDEO.mp4

The -O is to name the output file.

Thats it. I now have offline access to course videos. I made a quick video on snapchat of me doing it last night to show how pretty simple it is.

Badda-bing.

The key take-away from this is that there is a COPY function in the console that could be all kinds of use.


If you found this somewhat remotely useful, please donate some money to charity or something.