Using WordPress

Save as PDF | Print | About

Adding QuickTime Video

WordPress is designed to be as lightweight and fast as possible. To extend its functionality into more "unusual" territories, it supports a wide variety of "plugins." From this point of the tutorial on, we describe the use of WordPress with certain 3rd-party plugins installed. Ask your administrator to install any plugins you feel you need.

This page on adding QuickTime video requires the QuickTime Embedding Plugin.

Video may either be uploaded into your WordPress system, or may live on an external site such as YouTube or vimeo and merely embedded in your site.

To embed video from an external site:

 At a site such as YouTube, find the field labeled "embed." Click on that field to select its contents, then pull down Edit | Copy to copy the code to the clipboard. Return to your WordPress editing screen, click the cursor where you want the video to go, then switch to HTML mode. Making sure the cursor is still at the right location, pull down Edit | Paste. That's all there is to it! You can now return to Visual editing mode, if you prefer.

To upload fresh video into your own site: 

Video should be uploaded either in Flash format (see "Adding Flash," next) or as QuickTime. Video should be compressed to ensure quicker download. Check the file size of your exported video carefully -- your web-ready video files should generally consume no more than 4MBs per minute of video (in other words, a 4-minute video should not be larger than around 16MBs). If your file size is too large, then something is wrong. Our tutorial on compressing video for the web is here.

You should try to avoid uploading uncompressed or improperly compressed video. If you do upload bad video, please take the time to delete it from the server before trying again - you don't want to fill up a server with unusable data.

After uploading a compressed QuickTime file, select "Link URL" and insert the linking HTML code into the story body. Now edit out everything but the actual URL for the uploaded video. You should be left with something like:

http://www.somesite.com/.../dogtown.mov (Sample URL shortened for brevity)

Now surround this URL with code so it looks similar to the following:

[QUICKTIME http://www.somesite.com/.../dogtown.mov 320 256 false true]

Notice the four parameters at the end of this string. The two numbers are the width and height of the video. In the example above, note that the height is 256px, rather than the usual 240px. This is because the QuickTime controller bar is always exactly 16px high. You must add 16px to the height if you use a controller, or else it will be invisible.

The first true/false option lets you control "autoplay" - whether the video should play automatically when the page loads. When this is set to false, the user must click the play button to watch the video.

The second true/false option lets you specify whether the movie will have a "controller" beneath it (highly recommended).

A final option is to use a "poster frame" to stand in for the video. Using a poster frame means that the user is not forced to download all 12MBs of your video file just because they visited the page. Instead, a one-frame movie loads where the movie goes. Clicking the poster frame causes the movie to load. Unfortunately, you cannot use a standard JPEG image as a poster frame - you must use a one-frame QuickTime movie. To create one, launch QuickTime player and import an image file (which could be a still from the video you want to show, or anything else). Then pull down File > Save As and choose "self-contained movie." Give your one-frame movie a name like koipond-poster.mov. Upload the poster frame into the site. Now you've got your compressed video file (let's say it's koipond.mov) and a poster frame for it. Insert the whole wad into your story like this:

[QUICKTIME http://www.somesite.com/.../koipond.mov http://www.somesite.com/.../koipond-poster.mov 320 256 false true]

In other words, specify the full URL to the movie file, followed by a space, followed by the full URL to the poster frame, followed by the parameters.

Post a comment

Login to post a comment.