Video content in College Publisher

Those of us in student media who use College Publisher as a content management system are currently in the “workaround” stage with regards to Flash-based video content. The CP folks say they are working to get a Flash video component going and should have something soon.

In the meantime, after some trial-and-error, I was able to come up with at least two different methods to put embedded Flash video into a CP site. Details below, along with examples.

First, I should point out that using Mindy McAdams’ excellent description of creating Flash Videos (tutorial PDF available here) didn’t work when I tried to embed it into the College Publisher site for me, as I was unable to get the video to show the playback controls.

So I e-mailed Matt Smith at College Publisher, and he directed me to the two methods I would suggest for college media sites: Video-sharing services like YouTube or JumpCut and Sorenson Squeeze.

Squeeze was really easy to use, but it has a hefty price tag ($250 educational), and it actually embeds the playback controls into the final .swf video file, which differs from Mindy’s tutorial.

YouTube is inexpensive, and you don’t have to worry about hosting the video on your own server, as it downloads from YT’s servers when it’s played. However, you do have a YouTube watermark on the final product. You can try other video-sharing services, but YouTube is the most popular, so the interface is probably familiar to most.

A further note: This is not a step-by-step for editing the video. If you have a Mac, you have iMovie, and there are plenty of other software solutions available to edit video. If you can’t find any of this software, you might try JumpCut, which allows you to edit the video on the web. After the video is produced, however, you will end up with a movie file. For my YouTube example, I just recorded a QuickTime movie using the iSight camera in my MacBook Pro, creating a .mov file. The Step Team example was exported from Final Cut by a student. This is the point at which we are going to begin.

To use Squeeze:

Open Squeeze.
Click the “import file” button in the top left corner of the interface.
(click thumbnail for larger image)
Select the file you want to import and click the “import” button.
The file will appear in the lower right portion of the screen.
Select one of the Format & Compression Settings from the Macromedia Flash Movie (.swf) drop-down menu (see screenshot).
(click thumbnail for larger image)
Click the “Apply” button, and the setting will be transferred to the lower right area below the file you just imported.
To add playback controls, Click on the triangle next to the Format & Compression Setting. Next, double click on the “Player options.” A window will pop up with two screens: “Playback” and “Templates”
In the Templates screen, select one of the default templates. Click “OK.”
(click thumbnail for larger image)
Now, click the “Squeeze It!” button at the bottom right of the interface.
The file may take a while to create, depending on which of the formatting options you chose. The .swf file I created from a 1MB QuickTime file was 5.1MB with the funky wooden playback buttons. Note: Using the VP6 compression settings will reduce the file size slightly, but will take longer to process.
Open the .swf file of your movie in Flash Player. You will need to measure the final dimensions of your video. For instance, if the original video file was 320×240, the playback “frame” will add pixels on all sides. I used the Art Director’s Toolkit on a Mac to measure the final dimensions of the video, although other “pixel” rulers are available (pixel ruler for Windows, for instance). There may be an easier way to do this, but I wasn’t able to figure it out, short of opening up Flash 8, and the whole purpose of this is to assume you might not have Flash 8.
Upload the .swf file to server space via FTP. Make note of the absolute path URL for this file (e.g., http://www.yoursitename.com/yourvideo.swf)
In College Publisher, create a new story and input the following code into the text box. Note: You will need to change the settings that I have put in bold to fit the dimensions and URL of your movie.<object width=”XXX” height=”350“><param name=”movie” value=”http://www.yoursitename.com/yourvideo.swf“></param><param name=”wmode” value=”transparent”></param><embed xsrc=”http://www.yoursitename.com/yourvideo.swf” type=”application/x-shockwave-flash” wmode=”transparent” width=”XXX” height=”XXX“></embed></object>

I basically copied this code from the YouTube example below, so if you ever need another example, just go to YouTube and use the “Link to this video” area to copy the code and make the necessary changes.

When you publish the story, your Flash video should be embedded in the story.

To use YouTube:

Sign up for an account.
Go to the “Upload” page and fill out information about your movie.
(click thumbnail for larger image)
Click “Continue”
Browse to your movie in the “File to upload”
(click thumbnail for larger image)
Click “Upload Video”
Once you see this screen:
(click thumbnail for larger image)
copy the code in the “embed the video on your web site or blog” box.
In College Publisher’s administration interface, create a new story and paste the code from YouTube into the story text box.
Your video should show up in the story once published.