Customize Camtasia Code for Your Blog
Working with video can be frustrating sometimes. You need a video player to make your video work on any page. If you have Camtasia, it’s simple because Camtasia makes a player for you. But what if you want to add Camtasia videos to your blog?
Simple!
Here are some tips that will allow you to add Camtasia videos to your WordPress blog with ease:
- Image via Wikipedia
1. Open the video folder that Camtasia created for you.
2. Open the file with the page extension “.html” in a text editor. (You don’t need an HTML editor for this, but you can use one, if you’re using one that doesn’t do silly things like Front Page or Kompozer. Use Dreamweaver or a text editor like Notepad, WordPad, or TextPad. Or, if you’re on an Apple computer, just use your text editor.)
3. Scroll down near the bottom of that page, where you’ll see a block of code that is commented out. (It starts with <!– Users looking for simple object / embed tags can copy and paste the needed tags below.) You’re going to go right below that, and copy the code that starts with “<div id=”media”> and ends with –> (Stop just before that arrow). Notice the red code snippets, which are explained below:
<div id=”media” align=”center”>
<object id=”csSWF” classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ width=”640″ height=”498″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0″>
<param name=”src” value=”http://pathtovideocontroller.com/controller.swf“/>
<param name=”bgcolor” value=”#212123“/>
<param name=”quality” value=”best”/>
<param name=”allowScriptAccess” value=”always”/>
<param name=”allowFullScreen” value=”true”/>
<param name=”scale” value=”showall”/>
<param name=”flashVars” value=”autostart=false“/>
<embed name=”csSWF” src=”http://pathtovideocontroller.com/controller.swf” width=”640″ height=”498″ bgcolor=”#212123″ quality=”best” allowScriptAccess=”always” allowFullScreen=”true” scale=”showall” flashVars=”autostart=false&thumb=http://pathtostartingimage.com/FirstFrame.png&thumbscale=55&color=0×212123,0×212123″ pluginspage=”http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash”></embed>
</object>
</div>
So, let’s start with the customizations:
<div id=”media” align=”center”>: When you place the Camtasia code into the HTML tab of a blog post, you’ll need to add this to the div tag in order for the video to be centered in the post. Otherwise, it turns out on the left side and looks sloppy. If you want to align it on the right side, just change “center” to “right”.
<param name=”src” value=”http://pathtovideocontroller.com/controller.swf”/>: The control page is what tells the video how to look and act. So, you’ll need to add a link to that page twice in the Camtasia code. It assumes that the video is going to play from the same folder as that page, but if you’re storing the video files on Amazon S3 or your server and adding the video to your blog, the software won’t be able to find the controller file. So, figure out the path to the controller file (http://yourdomain.com/controller.swf or if using S3, you can right click on the file and copy the URL to your clipboard) and add the path to the controller file in two places, as shown in the example above.
<param name=”bgcolor” value=”#212123″/>: This is great if your first slide and the black background differ. Let’s say you have a blue slide and you want the color of the player’s background to match. Get Pixie at http://nattyware.com (free), and rest your mouse on the slide. Pixie will give you the HTML code for that exact color. Just change #000000 (in the original code) to whatever color you like (212123 in our example above). If you want the background color to be different from your first slide, Pixie will give you codes for any color you want to plug in there.
<param name=”flashVars” value=”autostart=false”/>: Camtasia is coded NOT to play when the page is opened. If you have a good reason for wanting the video to play when someone comes to your blog post, then change “false” to “true.” Boom! Your video will start playing when someone comes to the post.
thumb=http://pathtostartingimage.com/FirstFrame.png: This is the path to your starting slide. Camtasia always calls your first slide “FirstFrame.png” so determine the correct path to the image you want to use and change it to that. You don’t have to use the thumbnail that Camtasia provides, but if you’re using another image, be sure that it’s the same size as the size of your video. (Usually 640 X 480 pixels.)
4. Once you’ve made your customizations to the code, you may want to save it as a different document. (Don’t overwrite the original. Keep all the files in the Camtasia folder in tact. You won’t be changing anything about them, only creating a new, customized player code. But this is great because if you make a mistake, you won’t know where it is, so you can start over.)
5. Upload the original Camtasia folder to your server or to S3. (If S3, don’t forget to edit the ACL so that everyone can “read” your files or your video won’t play. Right click on the folder, and select Read next to Everyone, and check the box that says, “Apply to subfolders.)
7. Copy the code that you customized and paste it into a new post’s HTML tab (very important!). If you paste into the Visual editor, this won’t work.
8. Preview the page and voila! Your video plays just the way you want it to. (If it doesn’t, you probably forgot to edit the ACL in S3.)
And that’s how it’s done, son. Once you understand what’s going on, it’s pretty easy to post videos to posts or pages in your WordPress blog without using an outside service like EZS3 or buying player code, when you understand how Camtasia code works.
Let me see what you’ve done! Comment below.
