Chapter 11 Web Multimedia & Interactivity
The saying goes, "A picture is worth a thousand words." You already are aware that graphics help to make Web pages compelling. Other types of media, such as audio and video are introduced in this chapter. Appropriate movies and sounds on your Web pages can make them more interesting and informative. Sources of these media types, the XHTML code needed to place the media on a Web page, and suggested uses of the media are discussed.
You have probably experienced interactivity on Web pages many times—moving the mouse to cause a new image to appear, clicking on radio buttons to take a survey, or clicking on a product while you watch and listen to a Flash movie about a company. These are all examples of Web page interactivity. Adding the right touch of interactivity or multimedia to a Web page can make it engaging and compelling for your visitors.
Technologies commonly used to add interactivity to web pages include JavaScript, Java applets, DHTML, and Flash. This chapter will introduce you to adding interactive components to web pages.
Chapter Examples
View the Flash and Java Applet examples below as you read through the text.
Additional Flash, Java Applet, JavaScript, and DHTML examples are available below:
Chapter Links & Resources
Browser Plug-ins
- Flash Player
- Shockwave Player
- Adobe Reader
- Java Runtime Environment
- Real Player
- Windows Media Player
- Apple Quicktime
- Firefox Plug-in List
Recording, Hosting, Media & Podcasting
- Sound Recorder Tutorial
- Wav File Recording
- Archive
- OurMedia
- FileDen
- Audio File Converter
- RSS Feed Tutorial
- Create an RSS Feed
- Ponyfish
- Feedburner
- Icerocket
- iTunes
- Feedreader
Commercial & Open-Source Software
- Sonic Foundry
- Audacity
- LAME MP3 Encoder
- Media Box
- Goldwave
- Audio MP3 Maker
- Adobe Premiere
- Apple Quicktime
- Microsoft MovieMaker
- Adobe Flash
- Swish
- TechSmith Camtasia
- Microsoft Silverlight
Web Sources of Media Files
Copyright & Ethical Issues
Media, Accessibility & Standards
- Video Captioning
- MAGpie
- Bye Bye Embed
- Adobe Resources
- Jakob Nielsen circa 2001
- Flash & Accessibility
- Flash & Standards
Flash Examples & Resources
Java Resources & Applets
- Sun Microsystems
- Navigation & Menus
- Apycom
- CodeBrain
- Lake Applet
- Text Effects
- Games
- Applet Collection
- Java on the Brain
- Jars.com
- Visual Mining
- Stock Quote
JavaScript Resources
- EchoEcho Tutorials
- PageResource Tutorials
- Image Swapping
- The JavaScript Source
- Learning about JavaScript
DTHML Resources
Ajax Examples & Resources
- Adaptive Path
- Web 2.0
- Fickr
- Del.ico.us
- Gmail
- A9 Search
- Microsoft Live
- Ajax Developer Journal
- Ajax Patterns
- Web Pasties
- DHTML Nirvana Ajax
Easy Ways to Use Multimedia
Flash Banner Ad Tutorials
Build a clickable, animated banner ad step-by-step...
Flash 8 Banner Ad Tutorial
Flash CS4 Banner Ad Tutorial
Flash CS5 Banner Ad Tutorial
Flash Slideshow Tutorial
Download a customizable Flash slideshow for use on your own website.
Free & Customizable Media
Flash MP3 player
Flash Photo Viewer
Web Audio Player Download
iPad and iPhone and Flash, Oh My!
The Flash player is very well-supported and seems to be available for almost every browser and platform. However, there is is one platform that is conspicuous in its non-support of Flash: Apple's iPhone, iTouch, and iPad.
What's a multimedia web developer to do? Check out Video for Everybody for an example of how to deliver high-quality MP4 along with a Flash player. Although the not-yet-standard and somteimes controversial HTML 5 video element is used, the result is multimedia content that even your iPad visitors can view. Expect more use of the video element — YouTube has a beta version of the HTML 5 video player at http://www.youtube.com/html5.
Chapter Updates
- Page 430 There is one missing quotation mark in the code sample at the top of the page: use value="soundloop.mp3"
- Page 438 paragraph 3: Replace "Cantasia" with "Camtasia"
- JavaJam Case Study: Check the Chapter11/CaseStudyStarters in the Student Files download. The file javaogo.swf should be renamed javalogo.swf to match the case study instructions.
Questions or Comments?
The author would like to hear from you!
Send an e-mail to webdevfoundations@gmail.com