Andreas Haugstrup Pedersen | solitude.dk

This is a very long entry. Don't say I didn't warn you.

On both the videoblogging group and the Show in a Box (SIAB) working group the question of How do we best present video on the internet? has come up multiple times over the past 3-5 months. It is a vital question for the average videoblogger who wants to improve his or her site and especially for groups like Show in a Box which are trying to create software and designs that help present videos in their best light.

However, the discussions on those lists are mixing together three separate issues to answer the question of how to best present video on blogs. I will outline the three issues below and attempt to explain why it is important to solve these separately.

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:

Yesterday I wrote my first ever Wordpress plugin and overall it was not a pleasant experience. I have been working almost daily with Drupal for a year now and there some things the Wordpress team can learn from the Drupal developers when it comes to helping newcomers.

Wordpress does have documentation for how to write a plugin, but it is very well hidden. I bookmarked it so I don't have have to hunt for it again. Using a wiki for all documentation of Wordpress may allow for a maximum of flexibility when writing, but Drupal's collection of "handbooks" makes for a more pleasant reading experience. Drupal's API reference also comes with 6 example modules that demonstrate different parts of the system. I used these extensively when I began developing for Drupal and I missed them for Wordpress and this is something I would strongly recommend that the Wordpress community creates.

My plugin had to do two things. First it had to insert two javascript files whenever a blog post is being shown, secondly it had to insert a code generator on the page where you write new blog posts. Wordpress' way of handling both of these seem clunky and hack-ish compared to Drupal (I did make the exact same plugin as a Drupal module earlier this month).

In both scenarios you insert markup directly onto the page. In the former case by using the wp_head hook to insert the <script> elements, unlike Drupal that has functions included specifically for inserting javascript and CSS. Not a great problem in a simple plugin, but a potential annoyance when you can never be sure that your javascript file is only included once.

The latter caused more frustrations. Wordpress handles changes to the Write page in the same way—you insert raw HTML onto the page. I found it next to impossible to make the look and feel of my added HTML match whatever else was on that page. This is especially true when you use an admin theme that is not Wordpress' default one. I was able to make my code generator match the default Wordpress admin look, but then it does not look very good on Brittany's blog where she uses a different admin theme. On the other hand Drupal has a powerful Form API used to manipulate all HTML forms. For my Drupal module I simply used that to add my form elements. Using the API ensures that my form will always match the current theme, no matter what that is.

I am sure it is a deliberate decision from the Wordpress developers to have plugin developers insert their raw HTML everywhere instead of having built-in functions and APIs. The learning curve is not as steep and there is more immediate flexibility. However at the same time it becomes harder for users to evaluate the code in a given plugin—it is simply harder to decipher how a plugin does what it does and that's a Bad Thing. At the end of the day it's a matter of trade-offs and I strongly prefers Drupal's approach, even if it takes slightly longer to learn how to get started (at the very least because Drupal has excellent documentation to get me started).

There is however no excuse for Wordpress' disorganized documentation. Drupal's API reference is built directly from the comments in the code and in conjunction with the handbooks the result is a very thorough documentation. The code base in Wordpress has only a fraction of the code comments and I imagine that would make it impossible to make a “Wordpress API Reference”. This is sorely needed as many of the functions are undocumented.

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!