Have you ever come across an embedded video somewhere and thought to yourself: "gee, I really wish I could just download that video"? I have. There's no download link, but it got me thinking from a purely technical/logical point of view:
a) Streaming is really nothing more than downloading & playing at the same time.
b) I am authorized by the website to view a webpage with an embedded video: if I hit play the video starts playing.
c) I know the video is hosted on an external video platform and the video is not publically accessible.
d) I know the video platform has its own own separate authorization process, so apparently a cookie or something is granting me (or rather my browser) access.
e) I should be able to intercept and store the data received by my browser and save it as a complete video file, but likely and much easier, I'll find obfuscated in the data somewhere the actual video url I am currently authorized to access.
f) With the correct video url isolated from the website and accessed directly, surely my browser would allow me to download it like it would any other file?
It turns out that this is correct. It was true in the RealPlayer days (remember those?) and it is still true today. I'll share my findings.
Please note that the instructions below only apply to Vimeo videos, which can be recognised by these player controls:
Open your browser's developer tools
Visit the webpage with the embedded video. Open your browser's developer tools. As far as I know all the major browsers have these build-in nowadays, so feel free to use whichever browser you prefer. In the screenshot below I am using Google Chrome and I am on the Network tab.
Refresh the webpage with the embedded video
I know if I hit play the video will indeed play, so my browser must have received the correct video url. I would like to monitor which data is being sent to my browser so that I can get to that data. To do this, I have to refresh the website with the Developer Tools open and the Network tab visible.
Find the embedded video's HTML
I received a lot of stuff! In Chrome there's a little filter thingy which I can use to narrow down the list somewhat. I filled in "play" and found this:
The only unique thing here is the file with the number (blurred in the screenshot above). It sometimes shows as [number]?wmode=opaque. It's the embedded video's HTML data. I copy the code shown in the response pane and paste it into my favorite text editor.
Find the actual video URL
I look for the term ".mp4" and sure enough I get a bunch of these, one for each quality setting:
Mind you, it wasn't as nicely formatted but I immediately recognise it as JSON. I pick the line with the highest quality, in this case 1080p (Full HD), and copy the (long!) value for "url".
Download the video
Almost there! I paste the video URL back into my browser's address bar, press enter and presto: there's the video and it plays perfectly. Now all I've got to do is right click the video and tell my browser to download the file to my computer.
In summary, follow these steps to download a Vimeo video to your computer:
- Visit the webpage with the embedded video.
- Open your browser's Developer Tools, go to the Network tab and refresh the webpage.
- Filter the list of returned files with "play" and look for the file with the number. Copy the contents of this file and paste it into your text editor.
- Find lines of code that have ".mp4" in it. Look for the line of code with the highest quality (
"quality":"1080p") and grab the url (
- Open this url in the browser, right click the video and choose to download the file to your computer.