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:

I had some time left over today and I spent it porting David Meade's Wordpress plugin to Drupal. It has almost identical features: A couple of extra fields are added to comment forms allowing each commenter to link to a video and a video thumbnail. Those videos are then played inline in the comment thread if the Embed QuickTime Drupal module is turned on.

• Download video comment module - Drupal 5
• Download video comment module - Drupal 6

Installation notes

• Download and enable the module
• Go to access control and give yourself access to "administer video comments" and give your commenters "post video comments"
• Edit the content type(s) you wish to enable video comments for and enable them
• Download the Drupal 5 version of Embed QuickTime module and install if you want videos to play inline

You get two extra values on the comment object to use in your template. If you're using Embed QuickTime you would add the following to comment.tpl.php

<?php if ($comment->video && $comment->video_image): ?>
  <div class="hvlog">
    <a href="<?php print $comment->video; ?>" rel="enclosure">
      <img src="<?php print $comment->video_image; ?>">
    </a>
  </div>
<?php endif; ?>

This is not the first time I've dabbled in video comments. This post from August 2004 accepted video comments. That was around the time I wrote long posts about how to create a distributed video commenting system.

Today I received an e-mail from a user of the Embed QuickTime plugin who was having problems embedding video streams from his Second Life music performances on his blog. Specifically, his stream was opening in the stand-alone QuickTime Player rather than being embedded. It turns out you can't directly embed a video stream. The solution was to create a reference movie pointing to the streaming video and embed the reference movie on the site.

A step by step guide:

1. Open QuickTime Player
2. Open video stream: Enter the rtsp:// URL and open it. Your stream should start playing in the QuickTime Player.
3. Go to "Save as…"
4. Do not save as a self-contained movie, but save as a reference movie. Be sure to name your file with a ".mov" extension and not the default ".sdp".
5. Upload the new file to your webserver.
6. Embed the new .mov using the Drupal module, Wordpress plugin or using the stand-alone code generator.

The result will be a thumbnail on your website that flips into an embedded QuickTime playing the streaming video when clicked.

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.