Embed QuickTime • jQuery Plugin

What is Embed QuickTime?

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.

Optionally, Embed QuickTime creates a "share" link giving each viewer copy & paste code to post on their own websites.

It works with QuickTime (mov, mp4, m4v, 3gp), audio (mp3, wav, aiff, m4a) and Windows Media (avi, wmv, mpg).

The plugin is released under the MIT License. Modify and use as you please.

0. Drupal Module and Wordpress Plugin

I have created a Drupal module and a Wordpress plugin for Embed QuickTime to make the installation on those platforms easier. Download them below.

There is a Drupal 5 module as well (download), but this is unsupported and contains fewer features than described here.

1. Upload files to your server

To get started you need to upload two files to your server. The first is jQuery file and the second is the Embed QuickTime Plugin. If you are already using jQuery on your website you only have to download the plugin.

Upload these files to your webserver and note the URLs. For example:

You can also grab the original source code for the plugin if you wish to modify it in any way.

2. Paste HTML code in your template

The next step is to modify your website template to include the jQuery and Embed QuickTime code. This code must be present on all pages where you wish to embed videos. How you edit your templates depend on which software you use to power your website.

The code below must be placed between <head> and </head> in your templates. You should modify the parts in bold to reflect the URLs for jQuery and the plugin as they are on your webserver.

<script type="text/javascript" 
  src="http://example.com/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" 
  src="http://example.com/jquery.embedquicktime.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
  jQuery(document).ready(function() {
    jQuery.embedquicktime({
      jquery: 'http://example.com/jquery-1.2.3.pack.js', 
      plugin: 'http://example.com/jquery.embedquicktime.js'
    });
  });
</script>

3. Generate embed code

The first two steps completes the installation. Now you are ready to embed videos on your website. Use the code generator in the sidebar to generate the necessary HTML to embed your videos.

Advanced jQuery Usage and Hidden Options

The plugin supports any options QuickTime supports for the embedding. See the full list of options on Apple's website. The options can be set in several ways.

The plugin also supports the Metadata plugin and you can embed the settings directly into the HTML. The Metadata plugin is bundled with Embed QuickTime and you do not have to do anything to start using it. For example if you want a QuickTime that has width/height of 640x480:

<div class="hvlog {width: '640', height: '480'}">
  <a href="http://example.com/mymovie.mov" rel="enclosure">
    <img src="http://example.com/myimage.jpg">
  </a>
</div>

The settings can be placed on both the hvlog element and on the <a> element. Options set on the <a> will override those placed on the hvlog element, giving you a flexible way of including several entry points to a video. The example below contains two links, one plays the video at 320x240 (the image link) and the other at 640x480:

<div class="hvlog {width: '320', height: '240'}">
  <a href="http://example.com/mymovie.mov" rel="enclosure">
    <img src="http://example.com/myimage.jpg">
  </a><br>
  <a class="{width: '640', height: '480'}" 
    href="http://example.com/large.mov" rel="enclosure">
    Play large version
  </a>
</div>