Managing Images and Videos in Joomla! 1.5: Part 2

Exclusive offer: get 50% off this eBook here
Joomla! 1.5 Content Administration

Joomla! 1.5 Content Administration — Save 50%

Keep your web site up-to-date and maintain content and users with ease

$23.99    $12.00
by Tracey Porst | October 2009 | Joomla! Content Management Open Source

Read Part One of Managing Images and Videos in Joomla! 1.5 here.

Using video files

Video files are generally large due to the amount of content they contain and their length. It's beyond the scope of our article to describe them in detail, but in basic terms, they are a linear sequence of still images placed together to create a sequence of movement, usually accompanied by an audio track. Original video files are compressed using a codec to produce a compressed video file. The various codecs produce different results for file size, quality, and export.

Video files play in the browser by downloading the data through the Internet, progressively streaming it so the movie begins to play before the whole file has downloaded. Audio files work in a similar way, but are often not as large.

The final quality of a video also depends on the method used to capture it and how it's stored. The better the quality of the camera, the better the result. If you want to learn more about video, Wikipedia has a page at http://en.wikipedia.org/wiki/Video_formats.

Just like anything else, there are pros and cons of adding videos to your website. YouTube alone has proven there is a strong market for a more visual medium. However, there are still many people who prefer text-based content as well. Consider whether adding a video to your site will enhance your user's experience.

  • Is the material promotional or instructional? Is the content better demonstrated than explained?
  • Video material can broaden your target audience. Many people prefer watching a video online to reading lengthy bodies of text.
  • Videos aren't that great for search engine optimization. Consider adding a transcript to the page as well, in order to increase the ability to search.

Choosing the best video file format

Video played through the Internet requires a media player, which acts as an interface between the video file and the browser. These days most Internet users have one embedded within their browser. Popular versions include:

  • QuickTime, a player created by Apple
  • Windows Media Player
  • WINAMP
  • Real Player, developed by Real Networks
  • Adobe Flash Player

The following are some of the video file types that can be played through your website using third-party media players:

  • .wmv files are a popular format developed by Microsoft and which come bundled within the Internet Explorer software package and are, therefore, preinstalled on Windows PCs. This is a format good for movies with movement within them. This format works with Windows Media Player, RealPlayer, and another called VLC Player. This format isn't very compatible with Mac or Linux computer users.
  • .mov files are a QuickTime video platform extension that also plays back on the Windows operating system. The Apple QuickTime movie player software can be easily downloaded from Apple at http://www.apple.com/quicktime/download/. While not many browsers have the QuickTime media player installed, this format does provide very high quality video. You can always provide a link to the URL to download the software in order to play the video.
  • .avi files are often the format of videos with smaller dimensions, played back through a website. They are a container for audio and video files (hence the name!). They can sometimes be quite large in file size, depending on the codec used to compress the video footage. They are a mainstream format.
  • .swf and .flv videos are excellent for web video streaming and can also include interactive features. Most Mac and PCs have the Flash Shockwave Player installed; however, it can be downloaded from http://get.adobe.com/flashplayer/. Take note of the requirements for your individual operating system and browser preferences.

Keep the following in mind when considering a video for your website:

  • Ensure the video is succinct and the file size as small as possible. Even with a high speed download, time is still required to fully download the complete file.
  • Keeping the video between one to three minutes long and the file size under five megabytes

  • The more the movement in a video, the larger the file size.
  • Consider whether the video really enhances the message. Viewers are only interested in material that is useful to them and will resent consuming their download resources on a video that holds no value for them.
  • The larger the file size, the longer it takes to upload.
  • Consider your audience's data rate. Do they have high speed downloads or are there some with dial-up connections?

Video files are generally large due to the amount of content they contain. They stream (streaming is the way the Internet transfers multimedia information) through the data so the video will begin playing before it has fully downloaded itself into the browser, allowing it to be played back as quickly as possible. Audio files work in a similar way, but are not usually big files.

There are various video file formats available and most website users have a player to see them already contained within the browser. Many users have QuickTime, a player created by Apple (that also runs on PCs) and Real Player, developed by Real Networks.

Videos require a special plugin to play them through an article on your site, once you have uploaded it. Alternatively, you can embed a link from the popular YouTube site (http://www.youtube.com/). We'll look at how to do both in relation to the Party People website.

Uploading a video

We'll upload a new video, much the same way we would upload an image, to a new subfolder called videos within the Party People website. The steps are as follows:

  1. Navigate to the Media Manager.
  2. Select the stories folder and type videos into the Files input box.
  3. Click Create Folder.
  4. Select the new videos folder icon; then click the Browse button to choose the video from our desktop computer.
  5. Click Start Upload.

Now we have a video file ready to be inserted into an article. The Party People website has the popular AllVideos plugin installed to do this.

Updating videos—AllVideos plugin

This is another neat plugin that works in much the same way as the Simple Image Gallery, a stablemate from this team of developers.

If you don't have it installed and you would like to present videos on your site, ask your developer to install it for you or refer to the developers website http://www.joomlaworks.gr/content/view/35/41/ for instructions.

Our Party People website has a .mov video on the Products and Services page, which we will update.

To update the video display:

  1. Navigate to the Article Manager through the top menu and open theOur Services Include... article.
  2. Change the name of the video file between the { } and {/} tags within the text editor to the new filename. Depending on the format of the video being presented, the code should look like this:
      {mov}promoVideo{/mov}
  3. This code displays a QuickTime movie within the article.
  4. Save the changes. The following screenshot shows us how the video will look in context.

Note that you do not need to include the format extension at the end of the filename, as the tag surrounding the name addresses this.

Managing Images and Videos in Joomla! 1.5: Part 2

Changing to a different video file and format

The AllVideos plugin supports a number of video file formats and the developer's website lists them all at http://www.joomlaworks.gr/content/view/35/41/.

We'll change the video we just linked to a different one which is in the .wmv format. The steps are as follows:

  1. Navigate to the Article containing the video presentation.
  2. Change the tag between the { } braces to reflect the new file type, taking care not to delete any of the symbols. For example:
      {wmv}updatedServicesVideo{/wmv}
  3. Save the changes to your article.

Managing Images and Videos in Joomla! 1.5: Part 2

You should take care to avoid rearranging any of the formatting within the code, as this will prevent the movie from playing. That is, don't add any extra spaces, colons, commas, and so on.

 

Joomla! 1.5 Content Administration Keep your web site up-to-date and maintain content and users with ease
Published: October 2009
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

Updating a YouTube video

If there is a YouTube video playing within your website, there is a plugin installed within your site to make this happen. The Party People site uses the EasierTube plugin (which is accessible from http://joomlacode.org/gf/project/easiertube/).

Here we'll update our link within an Article on the Party People website.

The code for this to happen is fed through an article and changing the link to the video will update the display. Assuming a video has already been uploaded to YouTube and used in the Party People website, we'll now update the link.

Go to www.youtube.com and copy the relevant URL code for the link.

Managing Images and Videos in Joomla! 1.5: Part 2

Navigate back to the Article Manager within your administration Control Panel and locate the "Party Planners Unite" article.

Highlight the code for the old video link within the text editor and paste the code from YouTube over it.

Managing Images and Videos in Joomla! 1.5: Part 2

Save these changes to your Article and the new video link will play within the article in the same place as previously.

Managing Images and Videos in Joomla! 1.5: Part 2

Changing the YouTube video dimensions

Say you need to change the dimensions of the video, such as the height and the width:

  1. Navigate to the Extensions menu using the global menu at the top of the screen.
  2. Select Plugin Manager and navigate through the list until you see Content | EasierTube in the drop-down list. To make this quicker, use the Select Type filter at the top right of the screen and choose Content. This sorts the plugins to show only those applicable to content.
  3. Click the Content | EasierTube link to view the parameters for this plug-in and change them as you would like.
  4. Click Save to make your changes and view your updates on the live site.
  5. Managing Images and Videos in Joomla! 1.5: Part 2

Audio files

While it's not as commonplace as images and video, you can stream audio files through your website much as you would a video. Perhaps you have a recorded message for your users or you would like to play some music for them. Rememberto keep your file sizes as small as possible and consider the copyright implications of the material you use.

There are various audio recording and editing software programs available to purchase and download. Audacity is a free program and can be downloaded from http://audacity.sourceforge.net/. This software, along with a microphone, will allow you to record sounds or speech and save it as various audio file formats, including MP3.

There are many audio file formats, just as there are images. Wikipedia has a page with details of them at http://en.wikipedia.org/wiki/Audio_file_format.

Here we will use the Simple MP3 Player module to play an MP3 file on the Party People website.

To demonstrate how it can be applied, we have pre-installed it within the Party People website in the left module position, under the two existing menus. Now we'll configure it to play a sound effects file.

  1. Click the Extensions | Module Manager link through the top menu.
  2. Select the Simple MP3 Player module from the list of installed modules, in order to enable it and configure the player.
  3. Managing Images and Videos in Joomla! 1.5: Part 2

  4. Set the Details of the player as you require them. We'll change ours to be called Play Me!. Note that this is the name you will see in the Modules listing screen from now on.
  5. Enable the Module and select the position.
  6. Managing Images and Videos in Joomla! 1.5: Part 2

  7. Type in the filename of your MP3 file, you can include more than one by typing it as:
  8. First.mp3|second.mp3|third.mp3

  9. Type in the Title of each MP3 to be shown in the playlist.
  10. songOne :: Track 1|songTwo :: Track2|songThree :: Track3

    Set all of the other variables as you would like them, including a background image. Note that we have changed the width of the player to be the same as the menus above it, for a tidier layout. Consider the colors and general style of your site to make it appear integrated.

Managing Images and Videos in Joomla! 1.5: Part 2

Save your settings and check the player on the frontend of your site.

Managing Images and Videos in Joomla! 1.5: Part 2

Now when a visitor hits the site, they can choose to play the audio file and set the volume. This sort of user interactivity can be good for keeping visitors engaged with your site and tweaking some control works on this level.

Summary

As we have seen, it's not necessary to have an extensive knowledge of multimedia to be able to use images, videos, and audio within your site. However, it makes sense to be aware of the various file formats available and which one will suit your needs. Including visual and multimedia material on your site can certainly give it more impact and convey your message quickly and without words, which is handy when we know that users don't like to spend a lot of time reading large bodies of text.

Using the Media Manager makes adding and managing all of this quite easy and ensures your files are kept within a close-knit group of folders that can be readily accessed when you want to update your website content.

Joomla! 1.5 Content Administration Keep your web site up-to-date and maintain content and users with ease
Published: October 2009
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Tracey Porst

Tracey Porst is a freelance web developer and tertiary-level visual and interactive design teacher in Brisbane, Australia. Using the powerful Joomla! Content management system for the past few years has contributed to Tracey successfully managing a busy freelance practice that has delivered a range of functional and engaging web sites to her clients.

With several years experience in establishing and refining digital identities for a diverse range of businesses, Tracey's practice includes designing logos, corporate stationery, web site design and development, multimedia presentations, and other graphic artwork such as banners and advertising material.

Tracey's clients are happy to find a new media developer who can communicate the technical and strategic process of launching an online identity to them in relative terms, rather than being bedazzled by the jargon often associated with digital and online media.

Books From Packt

Joomla! 1.5x Customization: Make Your Site Adapt to Your Needs
Joomla! 1.5x Customization: Make Your Site Adapt to Your Needs

jQuery 1.3 with PHP
jQuery 1.3 with PHP

Drupal 6 Search Engine Optimization
Drupal 6 Search Engine Optimization

Joomla! 1.5 SEO
Joomla! 1.5 SEO

Plone 3.0 for Education
Plone 3.0 for Education

Spring Persistence with Hibernate
Spring Persistence with Hibernate

jQuery UI 1.6: The User Interface Library for jQuery
jQuery UI 1.6: The User Interface Library for jQuery

WordPress MU 2.8: Beginner's Guide
WordPress MU 2.8: Beginner's Guide

 

Your rating: None Average: 5 (1 vote)

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
e
v
z
s
j
b
Enter the code without spaces and pay attention to upper/lower case.
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