I’ve been watching a lot of videos from WordPress TV lately. There is some absolutely cracking content on there! However, I really wanted to be able to download videos. There wasn’t a download link, so I wrote this Greasemonkey script to add one.
Download
This script can be downloaded from Userscripts.org
Why Download Vidoes From WordPress.tv?
I mostly consume WordPress.tv content from my Android phone.
I don’t want to watch it over my 3G connection. These videos are often 400MB! It seems there’s a lower bandwidth version when you visit on a mobile device, but it’s still around 80MB in the one I did test. That’s still going to chew through my data plan far too quickly.
Sure, I could watch when connected via WiFi, but these videos are long enough that I may want to stop halfway through and pick it up later (when I may be on my 3G connection). If I leave the page open, then the video should play without needing to download anything later – but that’s a big if. Having the raw mp4 file on my SD card gives me more flexibility.
Also, although there are some basic controls built into the player (pause, move around the timeline), it doesn’t compare with the native player on my phone. It can even be viewed in full screen, but it’s fiddly to activate that control.
So all in all, it’s more convenient to be able to download the video file and have it on my device, rather than watch it through the website.
The Code
As with most of my Greasemonkey Scripts, I’ve embedded jQuery in it. This makes it so much quicker to write. It ends up being only a few lines:
[sourcecode language=”javascript”]
$(document).ready(function($){
// add contents of noscript into the HTML so we can access it via the DOM, hide it, then extract the URL and add Download link
$(‘noscript’).before(‘<div style="display:none" id="wp-tv-download">’+$(‘noscript’).eq(0).text()+'</div>’);
var url = $(‘div#wp-tv-download a’).attr(‘href’);
$(‘div#wpl-likebox’).after(‘<div style="text-align:left !important" class="sd-block"><h3 class="sd-title">Download:</h3><div class="sd-content"><a href="’+url+’">’+url+'</a></div></div>’);
});
[/sourcecode]
Line 3: We grab the contents of the noscript element, which includes the download link, and add it in a hidden div before the noscript element. We have to do this so we can manipulate the content of the noscript element, as we can’t access it via the DOM.
Line 4: We then extract the URL from the hidden div we created (which is now in the DOM) and store it in a variable.
Line 5: We then add the download link after the #wpl-likebox div. Note that we use the wordpress.tv classes, such as sd-block, sd-title and sd-content, which makes the result look like the rest of the site.
License
This script is dual licensed under the MIT and GPL licenses.