1 Web Developer Foundations: Using XHTML Chapter 10 Helper Applications and Plug-in Concepts

2 Learning Outcomes In this chapter, you will learn about: Helper Applications and Plug-ins Audio file types and how to obtain them Adding sound to a web page Video file types and how to obtain them Adding video to a web page Streaming Media

3 Helper Applications & Plug-ins Helper Application A program that can be designated to handle a particular file type (such as.wav or.mpg) to allow the user to view or otherwise utilize the special file. The helper application runs in a separate window from the browser. Plug-In A newer and more common method Plug-ins run right in the browser window so that media objects can be integrated directly into the web page.

4 Commonly Used Video & Audio Plug-ins Real Player Windows Media Player Apple Quicktime

5 Audio File Types.wav Wave File.aiff Audio Interchange File Format.mid Musical Instrument Digital Interface (MIDI).au Sun UNIX sound file.mp3 MPEG-1 Audio Layer-3

6 Obtaining Audio Files Audio files can be obtained from various sources: Record your own sounds or music Download sounds or music from a free site Download sounds or music from a site for a fee Record music from a CD A commercial CD can only be copied for personal use and not for publishing to the Web. Contact the owner of the copyright to request permission to use the music. Purchase a CD of sounds or music. There are some ethical issues related to using sounds and music created by others. Be certain to only publish sounds or music that you have either created yourself or have obtained the rights (sometimes called a license) to publish.

7 Using Sound on a Web Page Link to the sound telephone ringing Embed the sound You can embed the sound in a page and optionally display a control panel for the sound The tag (example: ch10page1.htm)ch10page1.htm Not part of the W3C standard but commonly used The tag (example: ch10page2.htm)ch10page2.htm W3C standard but not well supported by browsers

8 XHTML tag The embed tag A stand alone tag Attributes: src controls width height autostart loop align hidden

9 XHTML tag The object tag A container tag Attributes: data type width height autostart loop hidden

10 XHTML Background Sound Internet Explorer supports the tag. This tag is not supported by other browsers and should be avoided Using the tag to configure a background sound on a web page: (example: audio3.htm)audio3.htm

11 Video File Types.movQuicktime.avi Microsoft Audio Video Interleaved.mpgMPEG (Motion Picture Experts Group)

12 Obtaining Video Files Video files can be obtained from various sources: Record your own Digital Camcorder Webcam Copy video tapes using a video capture card Download from a free site Download from a site for a fee Purchase a DVD of stock videos here are some ethical issues related to using videos created by others. Be certain to only publish videos that you have either created yourself or have obtained the rights (sometimes called a license) to publish.

13 Using Video on a Web Page Link to the video (example: ch10page4a.htm)ch10page4a.htm Sparky! (Caution: long video download) Embed the video You can embed the video in a page and optionally display a control panel for the sound The tag (example: video1.htm)video1.htm Not part of the W3C standard but commonly used The tag (example: video2.htm)video2.htm W3C standard but not well supported by browsers

14 XHTML tag The embed tag A stand alone tag Attributes: src controls width height autostart loop align hidden

15 XHTML tag The object tag A container tag Attributes: data type width height autostart loop hidden A video displaying a cute Pekingese dog barking.

16 XHTML tag dynsrc attribute Internet Explorer Only tag dynsrc attribute is used to integrated the video with the web page. (example: dynsrc.htm)dynsrc.htm

17 Streaming Media A disadvantage to a regular audio or video file is that the web site visitor must wait for the entire file to download before beginning to experience it. Streaming media corrects this problem -- it begins to play almost immediately and uses "buffering" to capture the next portion of the file download. Three major components: Authoring Distribution Playback

18 Intro to RealNetworks Streaming Media Authoring There are a number of applications created by RealNetworks that can be used to create streaming media, including RealSlideshow and RealProducer. There are two components to every streaming media production: the media file itself (.rm file extension) the metafile (.ram file extension). The metafile (which means “file about a file”) is a text file that contains a link to the streaming media file. Web developers that want to use streaming media code a link to the metafile (not the media file).

19 Intro to RealNetworks Streaming Media Distribution The web server needs software to handle the streaming media – such as checking connection speed and adjusting the stream to the available bandwidth. One application is Real System Server 8. To use a streaming media file with a web page, three files must be uploaded to the web server: the media file (.rm extension), the metafile (.ram extension) and the web page. There are two ways to distribute RealNetworks streaming media. Web host provider purchases and installs a RealServer from RealNetworks. This will handle multiple users and monitor streaming rates with the client computers. This is needed for a commercial, heavy traffic site. A second option (which is free) is to stream the content using HTTP (the protocol that web browsers and web servers use to communicate). The media is transmitted at a preset, constant speed and the stream is not monitored.

20 Intro to RealNetworks Streaming Media Playback Web page visitors whose browser is equipped with the Real Player plug-in will experience your streaming media. If the web site is using the RwalServer, the stream will be adjusted to the bandwidth available, otherwise a constant stream will be sent.

21 Copyright Issues and Media Files(1) It is very easy to copy and download an image, audio, or video file from a web site. It may be very tempting to reuse a file in one of your own projects, but that may not be ethical or lawful. Only publish web pages, images, and other media that you have personally created or have obtained the rights or license to use. If another individual has created an image, sound, video, or document that you believe would be useful on your own web site, ask permission to use the material instead of simply “grabbing” it.

22 Copyright Issues and Media Files(2) All work (web pages, images, sounds, videos, etc.) is copyrighted – even if there is no copyright symbol and date on the material. Be aware that there are times when students and educators can use portions of other’s work and not be in violation of copyright law – this is called “fair use”. "Fair use" is use of a copyrighted work for purposes such as criticism, reporting, teaching, scholarship, or research.

23 Copyright Issues and Media Files(3) Criteria used to determine “fair use”:  The use must be educational and not commercial  The nature of the work  The amount copied must be as small of a portion of the work as possible.  The copy does not impede the marketability of the original work.

24 Summary This chapter introduced the XHTML techniques used to place sound, video, and streaming media files on web pages. It also discussed accessibility, usability, and copyright as they relate to media use on the Web.