Andreas Haugstrup Pedersen | solitude.dk

About two months ago I bought a new phone, one of these fancy ones that record video. I can even edit video (including trims and titles) and e-mail the finished product directly to my blip.tv account. The workflow is great and I've been trying to be better about actually uploading content. One thing that would motivate me would be if I displayed the video on this website. The idea is that I will get tired of seeing the same videos on the page and would then upload fresh ones. The smart reader will have noticed the thumbnails above titled “Mobile video“. Those are what I'm talking about. Click them to view the video on blip.tv.

Thankfully blip.tv has an open API so it was really easy to hack together some jQuery action to pull in my latest three mobile videos (using AJAX of course). Before I started I knew next to nothing about both blip.tv's API and jQuery. I was pleasantly surprised by both.

The steps were:

• Download the latest version of jQuery and copy it to my domain.
• Set up a PHP script to act as a proxy for fetching posts from blip.tv.
• Write javascript that turns the raw data into pretty thumbnails with links.

I wanted to load the posts from blip.tv with AJAX to avoid having the page hang in case blip.tv goes down (or is slow). I have occasional problems with the lastest photos from 23 in the sidebar on that account. For security reasons AJAX calls can only go to the same domain. That meant I had to write a PHP script that I could call from the javascript. The PHP script would then contact blip.tv and get the lastest posts and forward these back to the javascript. It ended up looking like this:

<?php
	header("Content-type: text/plain");
	// Get JSON from blip.
	$json = file_get_contents("http://blip.tv/posts/?user=andreas&skin=json&pagelen=3");
	if ($json) {
		$json = str_replace("blip_ws_results([{", "[{", $json);
		$json = str_replace("]);", "]", $json);
		echo "{$json}";
	}
?>

A couple of things to note: Most important is the fact that blip.tv offers posts in about a million different formats (HTML, RSS, JSON, OPML, Atom). This is great because I can just pick whatever is easiest to work with for any given scenario. I chose JSON because it's already javascript. Secondly, you'll notice a couple of string replacements in the above. Blip.tv wraps their JSON output in a function — I'm no javascript shark, but I suspect this makes things easier to work with when you're including the javascript file directly into one's page. It was really throwing the JSON function in jQuery off and I figured the fastest way to get around the problem was to strip the function before forward the data. Problem solved. I saved this file as getjson.php and uploaded.

Next thing was to write the javascript that made a call to the PHP script and transformed the JSON data into pretty thumbnail links. Due to the built-in functions of jQuery the javascript turned out to be a measley 10 lines of code:

$(document).ready(function(){
	$.getJSON("/js/getjson.php", function(json){
		var str = "";
		for (var i = 0; i < json.length; i++) {
			str = str+'<li><a href="'+json[i]['Post']['url']+
			  '"title="'+json[i]['Post']['title']+'"><img src="'+
			  json[i]['Post']['thumbnailUrl']+'" alt="'+
			  json[i]['Post']['title']+'" height="90" />
			  </a></li>';
		}
		$("#blipdata").empty();
		$("#blipdata").append("<ul>"+str+"</ul>");
	});
});

The above takes the JSON data from the PHP script and inserts thumbnail links into the div element which has an id attribute of blipdata. I saved this as blip.js and then all that was left was to include the javascript in the head section:

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/blip.js"></script>

And that's it. 19 lines of code total (plus the CSS). I wish everything was as easy to work with as the blip.tv API and jQuery. I'll definitely make sure to work more with both in the future.

A word of warning. The official jQuery documentation stinks. Really, really stinks. The jQuery Visual Documentation on the other hand, rocks. Really, really rocks.