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:
- 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:
- Roller will show the following success message:
- Scroll down the page again until you locate the video folder in the Manage Uploaded Files section, and click on it:
- 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.
- 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.
- Repeat the process with the third Browse... button and the showvbox_controller.swf file. Your File Uploads page must look like the following screenshot:
- 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:
- 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:
- 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"
<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"
- 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:
- 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.
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).
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.
Using sound files in your posts
There are times when you need to express something with audio. For example, if you've ever wanted to run your own radio show, Roller can help you with that! Just follow the next exercise and you'll be ready for action!
Time for action – uploading and inserting sound files in your posts
In the following exercise, I'll show you how to insert a sound file in one of your posts, and how to use Play Tagger from Delicious, so that your visitors don't need to download your sound files to hear them:
- 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 to go to the File Uploads page. Click on the Browse... button of the first text field, and the File Upload dialog will appear. Go to the folder where you downloaded this article's support files, and double-click on the seaontherocks.mp3 file to select it. The name of the file you selected will show up in the first textbox of the File Uploads page. Click on the Upload button to upload the sound file to your weblog server. Remember to write down the URL of the file you've just uploaded, for future reference.
- Use the following screenshot as an example to create a new post:
- Drag your mouse over the Sea on the rocks text to select it, and then click on the Insert Web Link button from the text editor's toolbar:
- In the URL field of the Insert/Modify Link dialog, paste the URL of the sound file that you uploaded in step 1, type Sea on the rocks in the Title (tooltip) field, and click on the OK button:
- Now scroll down the New Entry page and click on the Post to Weblog button, to publish your new post. Roller will show you the Changes saved message in a green box. Click on the Permalink field to see the new post on your weblog's front page:
- If you click on the Sea on the rocks link, your web browser will try to use a media player installed on your PC to play the sound file. Now click on the Edit link,near the bottom-right area of the screen:
- In the Edit Entry page, scroll to the Content field and click on the Toggle HTML Source button of the Rich Text editor's toolbar to see the following HTML source code:
- Scroll down the page and click on the Post to Weblog button, to update your post. Then, click on its Permalink to see it in your weblog's front page:
- There will be a listen icon at the left of the Sea on the rocks link. If you click on this icon, you'll start hearing the sound file directly from your blog post, and the "link" icon will change, as shown in the following screenshot:
- You can click on the stop button or wait until the sound finishes playing. Log out of Roller and close your web browser, if you wish.
What just happened?
In this exercise, you learned how to insert a sound file in one of your weblog's posts. In this case, there are two ways in which your visitors can hear your sound files—via an external media player installed on their PC, or using the Play Tagger tool from Delicious (http://delicious.com/help/playtagger). By using the latter one, your visitors will be capable of hearing your sound files without the need for an external media player.
As you can see, everything you upload into Roller can be pasted in a post via the URL assigned to it. In this example, we used a .mp3 file, but you can upload any other audio file type, and insert it in a similar way. If you use the Play Tagger tool, your visitors won't have to download and use an external media player to play your files. Now you can write and speak to your weblog visitors. They can see you as well, if you embed a video. This is why blogs are becoming so popular and powerful as a communication tool nowadays. Now let's get on to the next section, where you'll see how to take advantage of web services such as Google Maps, YouTube, and SlideShare.
In this article you learned:
- How to upload and insert videos on your posts.
- How to upload and insert sound files in your posts
If you have read this article you may be interested to view :