Posted on Sep 20 2006 by Alistair Barnett in Tutorials WordPress
My tutorial on adding Flash video to your Worpdress site was pretty popular. The only problem is Flash video tends to be lower quality than Quicktime video. So this tutorial is designed to make it easy for you to add Quicktime video to your WordPress site.
Besides the quality issue, there are other benefits to using Quicktime over Flash. First of all, Quicktime video is the file-format-of-choice for video blogs. In other words, people with video iPods and Quicktime-compatible, portable video players can download the video automatically, just like you would a regular podcast. And from what I understand, that’s not the case with Flash video (correct me if I’m wrong).
Another benefit is if your video camera records to the QT format, like mine, you can skip the step where you convert your QT video to Flash format. And finally, unlike the Flash tutorial, you won’t have to download and install a media player on your server because many people already have Quicktime installed on their system. For those who don’t, it’s a quick and simple download.
A quick note before we move forward. There are several ways to do what I’m showing you here. There are numerous plugins you can install, for example, but the method below seemed to me to be the simplest. So, without further banter, here’s the tutorial.
Note: This only works if you ARE NOT using the visual rich editor, also known as the WYSIWYG editor, to write your posts. If you are using the WYSIWYG editor, I’d suggest you not use it as it tends to mess things up a bit. To turn off the WYSIWYG editor, visit your profile page and uncheck the box that says “Use the visual rich editor when writing” in the bottom left corner of the page.
1. A WordPress Blog/Site. Okay, so you probably already have this part covered. If not, this tutorial will show you how to download and install WordPress on your own server.
2. Download, install and activate the WP-AddQuickTag Plugin. This is an excellent little plugin created by Roel Meurders. It gives you the ability to create new quicktags above the standard WordPress post box. Click on the graphic to the right, and you’ll see what I mean. We’ll be adding a button that will instantly add the code you need to embed a Quicktime video into a blog post.
Update 03/28/07: The WP-AddQuickTag plugin referenced above does not work with WordPress 2.1. However, there is another version that I’ve found effective with WP 2.1. Get it here:
After you’ve installed and activated the WP-AddQuickTag plugin, click the “Options” tab from your WordPress control panel. When you get to the Options page, you’ll see another menu beneath the main navigation bar. You want to click the “Add QuickTags” link.
Once you get to the WP-Quicktag Management page, you’ll see three fields labled as follows: Buttontext, Start tag(s) and End tag(s). We’re only interested in the Buttontext field and the StartTag Field (see below).
In the field for ButtonText, enter the following:
Insert QT Movie
In the field for Start tag(s), enter the following:
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="256" width="320"><param name="src" value="/videos/movie.mov"><param name="autoplay" value="false"><param name="type" value="video/quicktime" height="256" width="320"><embed src="/videos/movie.mov" height="256" width="320" autoplay="false" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/"></embed></object>
Leave all other fields blank, and then click the Update Options button.
1. Make sure your video is in Quicktime format. Quicktime videos have the file extension .mov.
2. Upload your video (via FTP) to your server. If you need an FTP program, I use SmartFTP, which is only compatible with Windows machines. If you use a Mac, I hear Fetch is a pretty cool FTP program, but I’m sure some of you Macheads have other options.
It’s crucial that when you upload your videos, you store them in a subdirectory called “videos.” If you want to store them in a different directory, you’ll have to change the code above that reads “/videos/movie.mov.” For example, if you store your videos in the root directory of your site, you’d want the code to read simple “/movie.mov.”
3. Write a new Worpdress post containing the code for your video. Now that you’ve uploaded your video, you want to write a new post. Enter a title for the post as you normally would. Just below the field for your post title, you should see the quicktag we created. It’s labled “Insert QT Movie.” Click that tag/button. When you clcik the quicktag, the code for your video will pop up in your post field.
4. Change the default name of your movie. The quick tag will automatically insert the movie name as “/videos/movie.mov.” So you’ll need to change that to whatever name you gave your movie. Click the graphic to the right, and you’ll see I’ve highlighted the quicktag itself, as well as the movie name (in two places). You have to change the movie name in both places. For example, if you gave your movie the filename “mymovie.mov,” you should change the highlighted code to “/videos/mymovie.mov” without the quotations, of course.
And that should do it. If you try this out, shoot me a message an let me know about it. I’d like ot make sure it works as easily as it should.