Andreas Haugstrup Pedersen | solitude.dk

I have just updated the Embed QuickTime plugin that allows you to post QuickTime easily to webpages. The biggest change is that the plugin now comes with 'share' code giving your visitors Copy & Paste code for posting your videos to their own sites. Yes, like YouTube without the ugly Flash. Additionally the Metadata plugin is now included in the download and you no longer have to download it separately to start using the advanced settings.

The Drupal 6 module and the Wordpress plugin have been updated in the same go.

To celebrate I give you a birdie you can share:

After making my Embed QuickTime jQuery plugin into a Drupal module I've continued and translated it into a Wordpress plugin. As the Drupal module it has these features:

• Inserts the jQuery files and the required javascript code on pages automatically.
• Inserts a code generator on the Write page. The code generator makes code you can copy and paste into the editor's "Code" view.

Go ahead and download the plugin. Install it by unzipping the file and uploading the folder to your wp-content/plugins folder. Activate it on the Plugins page and you should now see the code generator when you go to write a blogpost. The plugin has only been tested with Wordpress 2.3.1 and the default theme.

I have translated my jQuery plugin for embedding QuickTime movies on webpages into a Drupal module. It has the following features:

• Inserts the jQuery files and the required javascript code on pages automatically on all node pages.
• Inserts a code generator on add node forms (for enabled node types) that allows to send the correctly formatted HTML to the body field automatically. If Javascript is disabled it degrades gracefully and a code example is shown in place of the code generator.

You can download the module — all required files are included and there's no need for you to grab the plugin separately.

The module was written for Drupal 6 using the new Drupal.behaviors object and menu system. It will not work for Drupal 5 and below. It should be straightforward to backport as the module is very small.

Installation notes: Enable the module, edit the content type you wish to enable the code generator for (the setting is under "workflow"). The module has two access permissions: administer embed quicktime (users can enable/disable embed quicktime for node types); embed quicktime moves (users see the code generator on the node add form). Note: Setting the access permissions only affect the code generator. Anyone who can post the correctly formatted HTML will be able to post embedded QuickTime movies.

If you use the Metadata plugin to set options as described on the jQuery plugin page you need to use Full HTML as your input format in Drupal. I used Filtered HTML and it garbled the attributes and the metadata was lost.

The script I have been using the embed videos on this blog is not very flexible and it doesn't work in Internet Explorer. For a while I have been wanting to rewrite it using the excellent jQuery library. Finally I took a couple of hours last week to write it and the result is the Embed QuickTime plugin. From the website:

Embed QuickTime is a jQuery plugin that helps you embed QuickTime movies to play directly on your webpage, instead of redirecting your video to a separate page or forcing you to embed a video using Flash. It changes regular image links to the embedded QuickTime video when they are clicked. It works with .mov, .mp4 and .m4v files.

The problem this solves is similar to the problem solved by vPIP — the script that many videobloggers use. Why did I choose to write my own script instead of using vPIP?

• Leaner source code: The three javascript files vPIP uses clocks in at a combined 117KB. That's way too much just to embed a video. jQuery is actually included in this, but vPIP doesn't take advantage of jQuery (using it only for the thickbox). The Embed QuickTime plugin is 1.5KB plus the 27KB of a packed jQuery and we're down to a much more manageable 29KB. That makes Embed QuickTime 25% of vPIP's size.

• More freedom: Sometimes you need to set some of the more esoteric QuickTime options. vPIP supports very few of these while the Embed QuickTime plugin supports all the options for embedding QuickTime movies. This is something I ran into as I was writing the script. One of my recent videos needed to loop and that's something I would not be able to in vPIP.

• Simpler embed HTML: Related to the point above vPIP's embed HTML contains much fuzz because you are forced to set many options even if you just want the defaults. I want cleaner embed code that I can write from memory if I have to and I really don't want messy inline javascript.

• Faster code generator: I have a video URL and a thumbnail URL. That's all I want to paste in. The Embed Quicktime plugin automatically sets the size of the QuickTime player to the same size as the thumbnail image (unless you tell it otherwise). vPIP's code generator is cumbersome, but it still doesn't give me the options I need. For example it doesn't give me the option to remove the "close" link from the embedded video.

As the name suggests the Embed QuickTime plugin only supports embedding QuickTime movies. For my purposes, it would be trivial to extend it to support multiple formats. At the same time, this would be a good time to consider if you really need all those video formats in the first place. I only post in QuickTime, have never received complaints and I enjoy the freedom the QuickTime format gives me.

Give it a try if you want an easy way to embed QuickTime movies on your webpages. I've set it up on both Blogger and Wordpress in minutes. If you use it let me know what you think.

If I don't get my geek merit badge after this, I don't know what I have to do. Have you ever been in one of these situations?

Scenario A: You're writing a comment on your new geek crush's blog and you get an anxiety attack. “Am I being smart enough? Does he/she think I sound like a child? Should I bring out the dictionary and find some long words?”

Scenario B: You're a tech supporter and you have to explain again and again why Joe Average can't check his e-mail. “Oh my, this guy is so dumb. I'm wondering if I'm using words he doesn't understand.”

LIX Indicator to the rescue! The LIX Indicator is a jQuery plugin. LIX is a ‘read ability index’ — basically a number indicating how hard any given text is to read. The LIX indicator calculates the LIX of text as you type it in a text input field. It then provides you with visual feedback on how hard your text is to read. Green means you're writing children's books, red means you're Stephen Hawkings.

As an added bonus the LIX Indicator will tell you how many words, sentences and long words (more than 6 letters) your text contains. What are you waiting for? Go to the site and check out the cool demonstration!

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.