Chapter 12. Working with Multimedia
As we all know, the web is much more than text and pictures; it’s also full of multimedia. Multimedia is the combination of multiple forms of digitized media, including video and audio files. For example, a song from a band’s website or the trailer of an independent film (see Figure 12.1) are both forms of multimedia. When used properly, multimedia adds to the user’s experience. When not used properly, multimedia can ruin a website. This chapter is going to show you how to prepare multimedia objects for use in your website.
One important consideration when dealing with multimedia files is file size. Multimedia files are usually quite large, and there is a constant battle between keeping the file size small and maintaining high quality. Even though broadband access is becoming more common, there are still a large number of people who use slower Internet connections. Do not assume that everyone will have lightning-fast connections to download your large movie files.
Another consideration is that media files can be very specific to operating systems. Having a web page that tries to play a file that doesn’t work on most operating systems is just going to annoy some of your visitors. When making choices, make sure you take different operating systems into account and choose file types that run on the most operating systems.
In addition, not all visitors to your site may have the hardware to use multimedia effectively. They may not have speakers or graphics cards that allow all multimedia to play affectively. Don’t leave these folks out in the cold. Make multimedia an enhancement on your website, not a requirement.
Finally, multimedia files can be available for download or streaming. A downloaded multimedia file is transferred to a computer where it can be played by a media player. Streamed media files are played while downloading, usually through a browser. What you use depends on the size and content of your multimedia files.
Geek Speak
digitized
Any multimedia used on the web needs to be digitized, which means that it needs to be put on a computer in a file format the computer understands.
This chapter covers the multimedia objects you can use in web pages. This includes how to create, digitize, upload, edit, and use multimedia objects for your website. In Chapter 21, “Building a Multimedia Website,” these elements are put together on a website.
When used correctly, audio can enhance the mood of a website. A well placed bit of audio engages your audience and draws them into the web experience. Bad audio does the opposite or worse. If the audio is too loud or intrusive it puts visitors off. If the audio is repetitive or not related to the website in a way that makes sense, it annoys your visitors rather than welcomes them.
Some people use audio to add music (like a soundtrack) to their page, but the most common use of audio on the web these days is podcasting. Podcasting is essentially creating audio programs on different topics and distributing them on the Web. Chapter 21 covers how to add podcasts to your page.
This section covers what type of audio files are available, how to play them, and how to digitize them.
As mentioned previously, audio files come in a number of different types. These file types work with some operating systems but not with others. What you want is the smallest possible file size that works on the largest number of operating systems. As with graphics files, audio files can have different types of compression applied to them. Also, audio files can have different levels of audio quality. For more information on file compression, see Chapter 11, “Working with Images.” Here are the most common file types:
.wav—This is the default Windows audio file type. Even though it is the default for Windows, it can be used on most operating systems. It is uncompressed so can lead to larger file sizes, but has excellent quality.
.mp3—This is currently the most common file format. It runs on just about any computer that connects to the Internet and is compressed (so it has small file sizes) and produces high-quality output.
.wma—Windows Media Audio. This is a proprietary Windows format that is of high quality and good compression but does not play on all systems.
This is by no means a comprehensive list, but most of the files you encounter and want to use will be in these formats. If you choose another format, be sure to research its benefits and limitations before using it.
You can find a more comprehensive list of audio file formats at http://www.fileinfo.net/filetypes/audio.
Once you have a format chosen for the audio you are going to use, you need to have a player on your machine. A player is a piece of software on your machine, which may or may not be in your browser, that plays audio files. Most operating systems now have an audio player built into them, but there a few open source free audio players that have some different features:
Songbird (http://getsongbird.com/)—This high-quality open source audio player uses the same software that runs the Firefox browser (Figure 12.2).
Winamp (http://www.winamp.com/)—This full-featured media player has a robust developer community and tons of features.
caution
There are obviously copyright laws regarding audio files and who owns them. Here’s a simple rule: Do not rip and use music on your website to which you do not own the rights. Unless you are Elton John, don’t use Elton John’s music on your site.
To begin the process of using audio for your website, you need to digitize some audio. You can do this in a number of ways:
Record Your Own—By hooking up a microphone or musical instrument to your computer you can record your own sound files and use them on your website.
Rip CDs—Most audio and media players allow you to “rip” CDs. This means you take the audio from the CD and put it on your computer.
Use Royalty-Free Music—There are different sources for royalty free audio both on the Web and through CDs. Audio that is “royalty-free” means when you buy the audio you are free to use it in any way you want. Search the web for the type of royalty-free audio you want.
After you have your audio digitized, you’ll probably want to trim the beginning or ending, clean up some noise, or add some effects. To do this you need an audio editing program. Of course, there are many expensive high-end audio editors out there, but there are also some that are free and open source. Here are some to consider:
Audacity (http://audacity.sourceforge.net/)—This is the most popular open-source audio recorder and editor. It has a lot of features and runs on Windows, Mac, and Linux (Figure 12.3).
Broadcast (http://www.geocities.com/Hollywood/3709/bc.html)—An open-source Linux sound editor.
After you have your audio file edited, you need to save it in the format that best suits your purposes. For instructions on how to use the audio file on your web page, check out Chapter 21.
The web is full of incredibly useful audio resources. Audio experts have embraced technology and love to share their knowledge and skills. Here are a few useful links:
How to Record Audio For The Web (http://www.j-learning.org/present_it/page/how_to_record_audio_for_the_web/_)—A good overview of how to record audio for the web.
Podcast Recording Questions (http://www.jellycast.com/help-recording.html)—An excellent introduction to podcasting.
Podcasting in Plain English (http://commoncraft.com/podcasting)—An excellent video describing the basics of podcasting.
Today, everyone seems to be creating video podcasts. They are now ubiquitous on the Web. In addition to this, people have started filming themselves, their friends, and their pets—to the amusement of all of us—and posting these videos on the web.
In the past, the process of shooting and editing film was a complicated process. Not anymore. Today people can record hi-definition digital video, edit it with professional quality tools, and post it on YouTube for millions of people to view. Like audio, video has its own unique problems—things like poor quality and long load times. In Chapter 21, I will cover how to add video to your page.
This section covers what type of video files are available, how to play them, and how to digitize them.
Like audio, video also comes in many formats, and the format you choose affects the size of the files and the quality of the output. No one wants to watch a tiny video that is fuzzy and skips, nor do they want to wait 15 minutes to watch your homemade video because of the huge file size. It is important to choose the right file type to do this. Here are some of the most common video file types:
.avi—A very common video format that can be used with Windows. It can be compressed without a lot of quality loss.
.mov—The QuickTime movie format created by Apple. The standard (and free) QuickTime player is used to play these highly compressed files on either Mac or Windows.
.mpeg—An operating system–independent video format that gives small file sizes and excellent quality.
.wmv—A Windows video format that is becoming more common and has excellent compression.
Remember that you’ll want to use a file format that most visitors can use. If you choose another format, be sure to research its benefits and limitations before using it.
For a more comprehensive list of video file formats, go to http://www.fileinfo.net/filetypes/video.
Geek Speak
cross platform
Cross platform means it runs on more than one operating system (operating systems are sometimes called “platforms”). So if a program can run on a Windows machine and a Mac, it is cross-platform.
Most operating systems now come with built-in video players. Windows Vista has Media Center and the Mac has iTunes. You also might want to try out a few open-source video players that have different features:
VideoLAN (http://www.videolan.org/)—A cross-platform open-source video player that plays a number of video formats (see Figure 12.4).
miro (http://www.getmiro.com/)—This is an open-source media player that plays video files and has thousands of viewable channels of content, like your TV set.
kaltura (http://corp.kaltura.com/technology/video_player)—This is a cool utility that not only plays videos but allows you to annotate them and share those annotations with others.
Geek Speak
SD card
An SD card is a small media disk that stores data, including pictures and video. Most computers today come with an SD card reader so you can transfer your data from your camera to another computer.
It’s easy to digitize video these days. What used to take months and a lot of money now is relatively cheap and takes only a few minutes. The technology behind digitizing video has come a long way. Here are some ways to get digitized video onto your computer:
Use digital video camera—Today it is cheap and easy to get a video camera that records directly on digital media such as an SD card.
Record on video and import into your computer—Most video cards today have audio and video inputs to help you digitize video.
Use a webcam—Today you can buy a camera that plugs directly into your computer and digitize as you record.
Digitize analog video—Video captured on a video camera and stored on a tape is most likely analog content. To capture this data, use an analog converter such as Dazzle from Pinacle (http://www.pinnaclesys.com/PublicSite/us/Products/Consumer+Products/Dazzle/).
If you know anything about film or video, you know that using raw video footage is never wise. You need to add titles, rearrange shots, add music, and check audio. There are a number of high-cost video editors out there, but you should never pay for something you can get for free. Here are some free open source video editors:
Jahshaka (http://jahshaka.org/)—This is a cross-platform (Mac, Window, Linux) video editor that offers editing, effects, and audio integration (see Figure 12.5).
Avidemux (http://www.avidemux.org/)—This is a simple cross-platform video editing software program. Avidemux has fewer features than Jahshaka but is easier to use.
After you have your video file edited, you need to need to save it in the format that best suits your purposes.
When you have your video ready you can use a video hosting site to share it. These sites have popped up in the last few years and have become some of the most popular sites on the Internet. Here are a couple of the best video sharing sites:
YouTube (http://Youtube.com)—This is the most well-known video hosting site on the Web today. It enables you to upload videos, share them with others, and communicate with your viewers.
Ustream.tv (http://www.ustream.tv/)—A website that lets you share videos or stream live video from your computer (see Figure 12.6).
vimeo (http://vimeo.com/)—Another video sharing site that lets you connect to your viewers.
As I explained, the technology behind video has become much simpler and easier to use and doesn’t require as much technical knowledge as it once used to. Nevertheless, there are still some things to learn about it, so I advise you to read up on the subject. The more you know, the better your videos will be. There are numerous websites with bites and bites of information on video technology from people with lots of experience. Here are some to consider:
Video Files & Editing Tutorial—http://www.fluffbucket.com/othettutorials/video/format.htm
Web Multimedia Tutorial—http://www.w3schools.com/media/default.asp
Web Video Tutorials—http://www.webvideozone.com/public/department22.cfm