ADDING MULTIMEDIA TO YOUR WEB PAGE

Transcription

1 ADDING MULTIMEDIA TO YOUR WEB PAGE Multimedia refers to anything you can hear or see (e.g. sound, music, video, pictures and animations). Web browsers support many different multimedia formats. Multimedia elements, such as music or videos, are stored in media files that have their own formats. VIDEO FORMATS The following is a list of the more common video file formats that are used on websites: FORMAT FILE EXTENSION DESCRIPTION AVI.avi AVI (Audio Video Interleave) was developed by Microsoft. AVI is supported by all computers running Windows, and by the most popular web browsers. It is a very common format on the Internet, but not always possible to play on non-windows computers. WMV.wmv WMV (Windows Media Video) was developed by Microsoft. WMV is a common format on the Internet, but it cannot be played on non- Windows computer without an extra (free) component installed. Some later WMVs cannot play at all on non-windows computers because no player is available. MPEG.mpg or.mpeg The MPEG (Moving Pictures Expert Group) format is the most popular format on the Internet. It is cross-platform, and supported by all major browsers. QuickTime.mov QuickTime was developed by Apple. QuickTime is a common format on the Internet, but QuickTime movies cannot be played on a Windows computer without an extra (free) component installed. RealVideo.rm or.ram RealVideo was developed by Real Media. RealVideo allows streaming of video (online video, Internet TV) with low bandwidths. Because of the low bandwidth priority, the quality is often reduced. Flash.swf or.flv Flash was developed by Macromedia. Flash requires an extra component to play. This component comes preinstalled with all major browsers. MP4.mp4 Mpeg-4 (MP4) is the new format for the internet. YouTube recommends using MP4. YouTube accepts multiple formats, and then converts them all to.flv or.mp4 for distribution. Adding Multimedia to Your Web Page Page 1 of 5

2 SOUND FORMATS The following is a list of the more common sound file formats that are used on websites: FORMAT FILE EXTENSION DESCRIPTION MIDI.mid or.midi MIDI (Musical Instrument Digital Interface) is a format for electronic music devices like synthesizers and PC sound cards. MIDI files do not contain sound, but digital musical instructions (notes) that can be played by electronics (like your PC's sound card). Since MIDI files only contains instructions; they are extremely small. The example above is only 23K in size, but it plays for nearly 5 minutes. MIDI is supported by many software systems/platforms. MIDI is supported by all the most popular Internet browsers. MP3.mp3 MP3 files are actually the sound part of MPEG files. MPEG was originally developed for video by the Moving Pictures Experts Group. MP3 is the most popular format for music. The encoding system combines good compression (small files) with high quality. RealAudio.rm or.ram RealAudio was developed Real Media. It allows streaming of audio (online music, Internet radio) with low bandwidths. Because of the low bandwidth priority, the quality is often reduced. WAV.wav WAVE (more known as WAV) was developed by IBM and Microsoft. WAVs are compatible with Windows, Macintosh, and Linux operating systems. WMA.wma WMA (Windows Media Audio), compares in quality to MP3, and is compatible with most players, except the ipod. WMA files can be delivered as a continuous flow of data, which makes it practical for use in Internet radio or on-line music. HTML PLUG-INS A plug-in is a small computer program that extends the standard functionality of the browser. Plug-ins are often used by browsers to play audio and video. Examples of well-known plug-ins are Adobe Flash Player and QuickTime. Plug-ins can be added to Web pages using the <object> tag or the <embed> tag. Most plug-ins allow manual (or programmed) control over settings for volume, rewind, forward, pause, stop, and play. Adding Multimedia to Your Web Page Page 2 of 5

3 QUICKTIME Playing a WAV Audio File To play a WAV audio file using QuickTime, you would use the <object> tag. The following code will play an audio file called song.wav: <object width="420" height="360" classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" codebase=" <param name="src" value="song.wav"> <param name="autostart" value="false"> <param name="controller" value="true"> You ll notice that there are three (3) parameters added to the object. 1 The first is src that tells the browser where to find the sound file. In this example, the sound file is song.wav and is found in the same directory as the Web page. 2 If you want the sound file to play immediately after it's loaded, make the autostart parameter "true" otherwise make it "false". 3 The controller parameter tells the browser if a controller should be displayed to give your readers more control over the sound. QUICKTIME Playing an MP4 Video File To play an MP4 video file using QuickTime, you would also use the <object> tag. The following code will play an video file called movie.mp4: <object width="420" height="360" classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" codebase=" <param name="src" value="movie.mp4"> <param name="autostart" value="false"> <param name="controller" value="true"> ADOBE FLASH PLAYER Playing an SWF Video File To play an SWF video file using Adobe Flash Player, you would use the <object> and <embed> tags. The following code will play a video file called bookmark.swf: Adding Multimedia to Your Web Page Page 3 of 5

4 <object width="400" height="40" classid="clsid:d27cdb6e-ae6d-11cf-96b " codebase=" pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"> <param name="src" value="bookmark.swf"> <embed src="bookmark.swf" width="400" height="40"> </embed> WINDOWS MEDIA PLAYER Playing a WMV Video File To play a WMV video file using Windows Media Player, you would use the <object> and <embed> tags. The following code will play a video file called 3d.wmv: <object width="100%" height="100%" type="video/x-ms-asf" url="3d.wmv" data="3d.wmv" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6"> <param name="url" value="3d.wmv"> <param name="filename" value="3d.wmv"> <param name="autostart" value="1"> <param name="uimode" value="full"> <param name="autosize" value="1"> <param name="playcount" value="1"> <embed type="application/x-mplayer2" src="3d.wmv" width="100%" height="100%" autostart="true" showcontrols="true" pluginspage=" /"></embed> USING THE <embed> ELEMENT The <embed> tag defines a container for external (non-html) content. The following code fragment should play an MP3 file embedded in a web page: <embed height="50" width="100" src="horse.mp3"> Although the amount of code is significantly less than what we have used up until now, there are a number of problems that can result by using the <embed> tag like this. The following are just some of the problems: Different browsers support different audio formats If a browser does not support the file format, the audio will not play without a plug-in If the plug-in is not installed on the users' computer, the audio will not play If you convert the file to another format, it will still not play in all browsers Adding Multimedia to Your Web Page Page 4 of 5

5 USING THE <object> ELEMENT The <object> tag can also define a container for external (non-html) content. The following code fragment should play an MP3 file embedded in a web page: <object height="50" width="100" data="horse.mp3"> Again, although this is significantly less code, the same problems that may result with the <embed> tag may result with the <object> tag. PLAYING A YOUTUBE VIDEO IN HTML If you want to play a video in a web page, you can upload the video to YouTube and insert the proper HTML code to display the video. One way to play a YouTube video on a web page is by using the <iframe> tag as follows: <iframe width="420" height="345" src=" </iframe> To embed a YouTube video to your web page, you would use the <embed> tag as follows: <embed width="420" height="345" src=" type="application/x-shockwave-flash"> </embed> Adding Multimedia to Your Web Page Page 5 of 5