Uploading Videos and Sound Files on Your Posts Using Apache Roller 4.0

Exclusive offer: get 50% off this eBook here
Apache Roller 4.0 – Beginner's Guide

Apache Roller 4.0 – Beginner's Guide — Save 50%

A comprehensive, step-by-step guide on how to set up, customize, and market your blog using Apache Roller

$26.99    $13.50
by Alfonso V. Romero | December 2009 | Beginner's Guides Content Management Java Open Source

This article by Alfonso Romero, teaches you how to insert video files in your posts.The article tells you how to offer your spectators the easiest, quickest, and most attractive way to see what you have to offer.

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. Apachea Roller 4.0 – Beginner's Guide

  3. Roller will show the following success message:
  4. Apachea Roller 4.0 – Beginner's Guide

  5. Scroll down the page again until you locate the video folder in the Manage Uploaded Files section, and click on it:
  6. Apachea Roller 4.0 – Beginner's Guide

  7. 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.
  8. 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.
  9. Repeat the process with the third Browse... button and the showvbox_controller.swf file. Your File Uploads page must look like the following screenshot:
  10. Apache Roller 4.0 – Beginner's Guide

  11. 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:
  12. Apachea Roller 4.0 – Beginner's Guide

    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).

  13. 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:  
  14. Apache Roller 4.0 – Beginner's Guide

  15. 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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="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>
  16. 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:      
  17. Apache Roller 4.0 – Beginner's Guide

  18. 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.

Apache Roller 4.0 – Beginner's Guide A comprehensive, step-by-step guide on how to set up, customize, and market your blog using Apache Roller
Published: December 2009
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

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:

  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 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.
  2. Use the following screenshot as an example to create a new post:
  3. Apache Roller 4.0 – Beginner's Guide

  4. 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:
  5. Apachea Roller 4.0 – Beginner's Guide

  6. 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:
  7. Apachea Roller 4.0 – Beginner's Guide

  8. 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:     
  9. Apachea Roller 4.0 – Beginner's Guide

  10. 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:
  11. Apache Roller 4.0 – Beginner's Guide

  12. 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:
  13. Apachea Roller 4.0 – Beginner's Guide

  14. Type < script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://static. delicious.com/js/playtagger.js"> < /script > before all the text in the Content field, as shown in the following screenshot:
  15. Apache Roller 4.0 – Beginner's Guide

  16. 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:
  17. Apachea Roller 4.0 – Beginner's Guide

  18. 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:
  19. Apache Roller 4.0 – Beginner's Guide

  20. 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.

    Summary

    In this article you learned:

    1. How to upload and insert videos on your posts.
    2. How to upload and insert sound files in your posts

    If you have read this article you may be interested to view :

Apache Roller 4.0 – Beginner's Guide A comprehensive, step-by-step guide on how to set up, customize, and market your blog using Apache Roller
Published: December 2009
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


Alfonso V. Romero

Alfonso Romero is a freelance computer consultant and translator from Mexico. He's been working with Linux and open source software since 1999. He started operating his first web server (Apache) from a PC at home, offering free hosting services to experiment with Postfix, Squirrel Mail, MySQL, Apache, Tomcat, and Virtual Hosting. Since then, he's been working as a computer consultant for several clients in Mexico – writing Java, C++, and Web applications. Since 2000, he has worked for Pearson Education in Mexico as a computer books freelance translator and consultant. His latest book translations are the Spanish versions of Java How to Program, Seventh Edition, from Deitel & Deitel, and C++ How to Program, Sixth Edition, also from Deitel & Deitel. Al enjoys writing tutorials and teaching about Java, C++, PHP, the Apache Web server, Tomcat, MySQL, Web applications like Apache Roller, and all of the wonderful open source applications used today, and when he's not experimenting with new trends in Open Source applications, he enjoys playing his electric guitar.

Books From Packt

Joomla! with Flash
Joomla! with Flash

Joomla! 1.5 SEO
Joomla! 1.5 SEO

Zend Framework 1.8 Web Application Development
Zend Framework 1.8 Web Application Development

Ext JS 3.0 Cookbook
Ext JS 3.0 Cookbook

ICEfaces 1.8: Next Generation Enterprise Web Development
ICEfaces 1.8: Next Generation Enterprise Web Development 

Spring Persistence with Hibernate
Spring Persistence with Hibernate 

3D Game Development with Microsoft Silverlight 3: Beginner's Guide
3D Game Development with Microsoft Silverlight 3: Beginner's Guide

Microsoft Office Live Small Business: Beginner’s Guide
Microsoft Office Live Small Business: Beginner’s Guide

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software