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.

How to install:

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.

* jQuery 1.2.3 (click through and download)
* jquery.embedquicktime.js (right-click and save target as…)

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

* http://example.com/jquery-1.2.3.pack.js
* http://example.com/jquery.embedquicktime.js
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 and 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.

* Video URL: The full URL of your video file. E.g. http://www.example.com/mymovie.mov
* Thumbnail URL: The full URL of your thumbnail file. E.g. http://www.example.com/mythumbnail.jpg. The video player will be the same size as the thumbnail image.
* Title: An optional title. This will be displayed below the thumbnail image as a link to play the video.
* Allow sharing?: Check this checkbox if you’d like to enable the Copy & Paste code allowing viewers to easily post your video to their websites.

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 640×480:

<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 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 320×240 (the image link) and the other at 640×480:

<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>

Demo: http://www.solitude.dk/archives/embedquicktime/
Download: http://www.solitude.dk/archives/embedquicktime/jquery.embedquicktime.js
Source: http://www.solitude.dk/archives/embedquicktime/

Related Listings:

1. CJ Image Video Previewer CJ Image Video Previewer is meant to mimic the video...
2. Moo Multibox Script Simple Lightbox that supports images, flash, video, mp3s, html. Features:...
3. jQuery Youtube Playlist Plugin – Youtube Playlist For a recent client project, we wanted to be able...
4. JQuery Multimedia Portfolio This plugin for jQuery will automatically detect the extension of...
5. Page Peel with Jquery Plugin A jquery plugin to implement a page peel effect to...

Do you like this post?

Email: