Using videos in your posts

It’s time to learn how to insert video files in your posts. You can just insert one as an HTML link, but who does that anymore? It’s a good way to drive your prospective readers away! In today’s world, you need to offer your spectators the easiest, quickest, and most attractive way to see what you have to offer. My job is to show you how to do that with your Roller weblog, so let’s get to it!

Time for action – uploading and inserting videos on your posts

In this exercise, I’ll show you how to upload a video file to your blog server and then insert it into a post using Apache Roller:

1. Open your web browser and log into Roller. The New Entry page will appear. Click on the File Uploads link from the Create & Edit tab. Scroll down the File Uploads page until you locate the Manage Uploaded Files section. Type video in the New Directory field and click on the Create button, as shown in the following screenshot: 



2. Roller will show the following success message:



3. Scroll down the page again until you locate the video folder in the Manage Uploaded Files section, and click on it:



4. Roller will take you to the same File Uploads page, but this time you’ll be inside the video directory. Now click on the first Browse… button of the Upload files for use in weblog main section. On the File Upload dialog, go to the folder where you downloaded the support files for this article, and double-click on the FirstFrame.png image to select it. The name of this file will show up on the first textbox of the File Uploads page.
5. Now click on the second Browse… button and double-click on the showvbox.mp4 file, so that its name appears in the second textbox of the File Uploads page.
6. Repeat the process with the third Browse… button and the showvbox_controller.swf file. Your File Uploads page must look like the following screenshot:



7. Click on the Upload button to upload the three files to the video directory in your blog server. Roller will return the following success page:



Don’t forget to write down the three URLs from the previous Roller message; you’ll need them when inserting the video into an entry (post).

8. Click on the New Entry link from the Create & Edit tab to go to the New Entry page and create a new post for your blog. Type Ubuntu Linux Virtual Machine Inside a Windows XP PC in the Title field, select Open Source in the Category field, type virtualbox windows xp linux ubuntu in the Tags field. In the Content field, and type Here’s a sample video of my Ubuntu Linux Virtual Machine, running inside a Windows XP PC with VirtualBox: as shown in the following screenshot:  



9. Click on the Toggle HTML Source button from the HTML editor and write the following code below the text you typed in step 8 (the text in bold must correspond to the URLs from step 7’s screenshot):

   <object height="498" width="640" id="csSWF"
     classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
     codebase="http://download.macromedia.com/pub/shockwave/
    cabs/flash/swflash.cab#version=9,0,115,0">
   <param name="src"
          value="http://localhost/roller/main/
          resource/video/showvbox_controller.swf" />
   <param name="bgcolor" value="#1a1a1a" />
   <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 height="498" width="640" name="csSWF"
          src="http://localhost/roller/main/resource/
               video/showvbox_controller.swf"
          bgcolor="#1a1a1a" quality="best"
          allowscriptaccess="always"
          allowfullscreen="true" scale="showall"
          flashvars="autostart=false&amp;
          thumb=http://localhost/roller/main/resource/
                video/FirstFrame.png&amp;
          thumbscale=45&amp;color=0x000000,0x000000"
          pluginspage="http://www.macromedia.com/
                       shockwave/download/
                       index.cgi?P1_Prod_Version=ShockwaveFlash"
   />
   </object>
   

10. Click on the Save as Draft button, to save a draft of your post. Then scroll down the page and click on the Full Preview button, to see how your post will look in your blog before publishing it. The preview will open in a new tab in your web browser:      



11. Click on the play button and the video will begin to playback. When finished, close the preview tab and click on the Post to Weblog button to publish your new post. You can logout from Roller now.

What just happened?

The previous exercise showed you how to upload a video to your blog server and insert it in a post. As you can see, videos are a little more complicated than plain images. In this case, we used the following files:

• FirstFrame.png: This is the thumbnail image that shows up before the video begins to playback
• showvbox.mp4: The video file
• showvbox_controller.swf: The controller that plays back theshowvbox.mp4 file

    

The video was produced with Camtasia Studio, an excellent screen recording software application from TechSmith (http://www.techsmith.com). If you want to practice with your own videos, you can download a 30-day free trial version of Camtasia Studio from the following URL: http://www.techsmith.com/download/camtasiatrial.asp.

What would happen if you wanted to embed a video from your camera or cell phone? Well, you can embed it directly in your blog, but the best thing to do is use a software application such as Camtasia Studio to create the .swf controller and the HTML code to embed into your post automatically. Then you just need to change the .swf controller and thumbnail URLs, as you did in step 9 of the previous exercise. You can use the same embed code to insert a different video in your blog; just be sure to change the URL in bold text.

You could also upload your video to YouTube instead of uploading it into Roller, as we’ll see later in this article.