Scott Hanselman

How to download embedded videos with F12 Tools in your browser

November 29, '17 Comments [16] Posted in Tools
Sponsored By

I got an email this week asking how to download some of my Azure Friday video podcast videos from http://friday.azure.com as well as some of the Getting Started Videos from Azure.com.

NOTE: Respect copyright and consider what you’re doing and WHY before you use this technique to download videos that may have been embedded for a reason.

I told them to download the videos with F12 tools, and they weren't clear how. I'll use an Azure Friday video for the example. Do be aware that there are a ton of ways to embed video on the web and this doesn't get around ones that REALLY don't want to be downloaded. This won't help you with Netflix, Hulu, etc.

First, I'll visit the site with the video I want in my browser. I'll use Chrome but this also works in Edge or Firefox with slightly different menus.

Then press F12 to bring up the Developer Tools pane and click Network. In Edge, click Content Type, then Media.

Download embedded videos with F12

Click the "clear" button to set up your workspace. That's the International No button there in the Network pane. Now, press Play and get ready.

Look in the Media list for something like ".mp4" or something that looks like the video you want. It'll likely have an HTTP Response in the 20x range.

Download 200

In Chrome, right click on the URL and select Copy as CURL. If you're on Windows pick cmd.exe and bash if you're on Linux/Mac.

Downloading with CURL

You'll get a crazy long command put into your clipboard. It's not all needed but it's a very convenient feature the browser provides, so it's worth using.

Get Curl: If you don't have the "curl" command you'll want to download "curl.exe" from here https://curl.haxx.se/dlwiz/ and, if you like, put it in your PATH. If you have Windows, get the free bundled curl version with installer here.

Open a terminal/command prompt - run cmd.exe on Windows - and paste in the command. If the browser you're using only gives you the URL and not the complete "curl" command, the command you're trying to build is basically curl [url] -o [outputfile.mp4]. It's best if you can get the complete command like the one Chrome provides, as it may include authentication cookies or other headers that omitting may prevent your download from working.

GOTCHA: Make sure to remove the -H "Range:" headers (if any) to ensure you get the FULL download and not just a range of bytes!

image

BEFORE you press enter, make sure you add "-o youroutputfilename.mp4." Also, if you can an error about security and certificates, you may need to add "--insecure."

Downloading a streaming video file with CURL

In the screenshot above I'm saving the file as "test.mp4" on my desktop.

There are several ways to download embedded videos, including a number of online utilities that come and go, but this technique has been very reliable for me.


Sponsor: Scale your Python for big data & big science with Intel® Distribution for Python. Near-native code speed. Use with NumPy, SciPy & scikit-learn. Get it Today

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb
Wednesday, 29 November 2017 21:28:25 UTC
Firefox makes this even easier without using the developer console. Right click -> View Page Info, select Media tab, select video in list, click on "Save As..." button.
Cvnk
Wednesday, 29 November 2017 21:54:32 UTC
If you're trying to download the full video, you'll need to look for and remove any ranged request headers. These will cause only part of the video file to be downloaded.

In the example above, the part of the cURL command to remove is:

-H "Range: bytes=3145728-"
Jamie
Wednesday, 29 November 2017 22:33:47 UTC
Good catch Jami, I will update the post to reflect that!
Scott Hanselman
Wednesday, 29 November 2017 22:40:28 UTC
This is definitely useful for embedded videos that don't have a download link.

For the Azure Fridays videos, you can just click the Ch9 button in the lower right of the video player to view the video on the Channel 9 website. The Channel 9 video pages have download links for 3 video quality levels and MP3s.
Wednesday, 29 November 2017 22:46:12 UTC
I usually try youtube-dl (local python script running in WSL, but I think there is also a stand-alone Windows binary) first as it supports quite a lot if video sites before I resort to the techniques you describe.
Nicholas
Thursday, 30 November 2017 00:40:42 UTC
Jon - Ya I know, but I wanted to use a video that I own. ;)
Scott Hanselman
Thursday, 30 November 2017 12:54:13 UTC
@WSL users, "cclive" is quite nice.

sudo add-apt-repository universe
sudo apt-get update
sudo apt-get install cclive

Michael
Thursday, 30 November 2017 14:04:17 UTC
That's what I call a great post, I love the way you explain it. Makes it look so simple!
Friday, 01 December 2017 08:45:15 UTC
I made an app to download stuff from youtube. Only use it to download your own previous uploaded videos that you've lost and want to recover of course.
It's up on GitHub. I accept/love pr's
https://github.com/jphellemons/DownloadYouTube/
Friday, 01 December 2017 12:38:03 UTC
Could you not also use PowerShell?
(New-Object System.Net.WebClient).DownloadFile($url, $output)
or
Import-Module BitsTransfer
Start-BitsTransfer -Source $url -Destination $output
Think
Invoke-WebRequest -Uri $url -OutFile $output
is out though, as it buffers it first.
Chris
Friday, 01 December 2017 17:11:03 UTC
Rather than using curl, a different way could be to "Copy link address" (first option in the context menu), open the URL in a new tab & while the file is loading use "Save as.." from the context menu or Ctrl+S keyboard shortcut to save the file with the desired name
Sunday, 03 December 2017 17:38:32 UTC
I would like to mention that this technique is great for trouble shooting pesky problems if you are working on a SPA or ajaxy application. This trick has saved me so much time when debugging when I can find the pesky operation on the browser capture the curl command to reproduce it so I can debug things on the server end (or if it is easy to set up a similiar scenario that you want to test then you can fiddle with the json payload to the server to see what it will do). As I have gone about learning about the features in dev-tools I have been amazed at how useful some of them are ... copy as curl is one of my favorites.
David
Monday, 04 December 2017 06:00:02 UTC
hello
In chrome you can right click that video and open in the new tab and right click on the video and select save as.
hasan kooshkaki
Tuesday, 05 December 2017 13:05:54 UTC
For this site Azure, the video can be easily downloaded by following the below procedure:
1. Go to the Web Site
2. Open Developer Tools by pressing F12
3. Go to Network tab and then click on Media.
4. Now refresh using Ctrl+F5.
5. Click on the result in Media now and copy the link address.
6. Open the copied link address in new tab. It will open in video player which has the option to download on the bottom right corner.

Easy Downloading.... :)

Thanks
Janakiram Maddanala
Friday, 08 December 2017 06:46:04 UTC
In chrome there is an add on the does it effortlessly, FVD Downloader. ;)
Ashraf H
Friday, 08 December 2017 14:16:34 UTC
thank you very much for this post
طراحی سایت بدون کدنویسی
Name
E-mail
(will show your gravatar icon)
Home page

Comment (Some html is allowed: a@href@title, b, blockquote@cite, em, i, li, ol, pre, strike, strong, sub, super, u, ul) where the @ means "attribute." For example, you can use <a href="" title=""> or <blockquote cite="Scott">.  

Live Comment Preview

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.