Adding Media for WebPages

 

Adding video
You can add video to your web page in different ways and using different formats. Video can be downloaded to the user or it can be streamed so that it plays while it is downloading. The most common streaming formats available on the web for the transmission of video files are RealMedia, QuickTime, and Windows Media.

You must download a helper application to view these formats. With these formats, you can stream audio and video simultaneously.
If you'd like to include a short clip that can be downloaded rather than streamed, you can link to the clip or embed it in your page. These clips are often in the AVI or MPEG file format.



You can use Director to create Shockwave movies or Flash to create interactive, low-bandwidth, multimedia presentations for the web. With Flash, file size is surprisingly small, and the technology works across many platforms. (Of course, users must first download the free player plug-in before they can view these files.)
 
This is a streaming version of the same movie... I don't know how this will all work out....

 


Adding sound to a page
There are several different types of sound files and formats, and several different ways to add sound to a web page. Some factors to consider before deciding on a format and method for adding sound are its purpose, your audience, file size, sound quality, and differences in browsers.
Note: Sound files are handled very differently and inconsistently by different browsers. You may want to add a sound file to a Flash movie, then embed the SWF file to improve consistency.

About audio file formats

The following list describes the more common audio file formats along with some of the advantages and disadvantages of each for web design.
.midi or .mid (Musical Instrument Digital Interface) format is for instrumental music. MIDI files are supported by many browsers and don't require a plug-in. Although their sound quality is very good, it can vary depending on a visitor's sound card. A small MIDI file can provide a long sound clip. MIDI files cannot be recorded and must be synthesized on a computer with special hardware and software.

Player?

NO



.wav (Waveform Extension) format files have good sound quality, are supported by many browsers, and don't require a plug-in.
You can record your own WAV files from a CD, tape, microphone, and so on. However, the large file size severely limits the length of sound clips that you can use on your web pages.

Player?

NO

.aif (Audio Interchange File Format, or AIFF) format, like WAV format, has good sound quality, can be played by most browsers, and doesn't require a plug-in; you can also record AIFF files from a CD, tape, microphone, and so on. However, the large file size severely limits the length of sound clips that you can use on your web pages.

Player?

NO


.mp3 (Motion Picture Experts Group Audio, or MPEG-Audio Layer-3) format
is a compressed format that makes sound files substantially smaller. The sound quality is very good: if an MP3 file is recorded and compressed properly, its quality can rival that of a CD. New technology lets you "stream" the file so that a visitor doesn't have to wait for the entire file to download before hearing it. However, the file size is larger than a Real Audio file, so a whole song could still take quite a while to download over a normal phone line connection. To play MP3 files, visitors must download and install a helper application or plug-in such as QuickTime, Windows Media Player or RealPlayer.

Player?

yes..QuickTime, Windows Media Player or RealPlayer

.ra, .ram, .rpm, or Real Audio format has a very high degree of compression with smaller file sizes than MP3. Whole song files can be downloaded in a reasonable amount of time. Because the files can be "streamed" from a normal web server, visitors can begin listening to the sound before the file has completely downloaded. The sound quality is poorer than that of MP3 files, but new players and encoders have improved quality considerably. Visitors must download and install the RealPlayer helper application or plug-in to play these files. RealPlayer helper application or plug-in to play these files.

 

Linking to an audio file
Linking to an audio file is a simple and effective way to add sound to a web page. This method of incorporating sound files lets visitors choose whether they want to listen to the file, and makes the file available to the widest audience.
To create a link to an audio file:
1. Select the text or image you want to use as the link to the audio file.
2. In the Property inspector, click the folder icon to browse for the audio file, or type the file's path and name in the Link field.
ie. HI, click me to hear me sing!
This file is a hefty 132K which is why it takes so long to download.

or

Embedding a sound file
Embedding audio incorporates the sound player directly into the page, but the sound only plays if visitors to your site have the appropriate plug-in for the chosen sound file. Embed files if you want to use the sound as background music, or if you want more control over the sound presentation itself. For example, you can set the volume, the way the player looks on the page, and the beginning and ending points of the sound file.
To embed an audio file: pluginfile for music below and above: music file for fish or whatever

1. In Design view, place the insertion point where you want to embed the file and then do one of the following:
• In the Insert bar, select Media then click the Plugin icon.
• In the Insert bar, select Media then drag the Plugin icon to the Document window, or to the Code view window if you are working in the code.
• Choose Insert > Media > Plugin.
For more information about the Plugin object, see Inserting Netscape Navigator plug-in content.
2. In the Property inspector, click the folder icon to browse for the audio file, or type the file's path and name in the Link field.
3. Enter the width and height by entering the values in the appropriate fields or by resizing the plug-in placeholder in the Document window.
These values determine the size at which the audio controls are displayed in the browser. For example, try a width of 144 pixels and a height of 60 pixels to see how the audio player appears in both Navigator and Internet Explorer.

Using behaviors to control media
You can add behaviors to your page to start and stop various media objects.
Control Shockwave or Flash lets you play, stop, rewind, or go to a frame in a Shockwave or Flash movie (see Control Shockwave or Flash).

Play Sound lets you play a sound; for example, you can play a sound effect whenever the user moves the mouse pointer over a link
Check Plugin lets you check to see if visitors to your site have the required plug-in installed, then route them to different URLs, depending on whether they have the right plug-in. This only applies to Netscape Navigator Plug-ins, as the Check plugin behavior does not check for ActiveX controls. For more information, see Check Plugin.

 

Using parameters to control media objects
Use the Parameters dialog box to enter values for special parameters defined for Shockwave and Flash movies, ActiveX controls, Navigator plug-ins, and Java applets. Parameters are used with the object, embed, and applet tags. Parameters set attributes specific to the type of object being inserted. For example, a Flash movie object can have a quality parameter <param name="quality" value="best"> for the object tag. The Parameter dialog box is available from the Property inspector. See the documentation for the object you're using for information on the parameters it requires.
Note: There is no widely accepted standard for identifying data files for ActiveX controls. Consult the documentation for the ActiveX control you're using to find out which parameters to use.
To open the Parameters dialog box:
1. Select an object that can have parameters (such as a Shockwave movie, an ActiveX control, a Navigator plug-in, or a Java applet) in the Document window.
2. Open the dialog box using one of these methods:
• Right-click (Windows) or Control-click (Macintosh) the object, and choose Parameters from the context menu.
• Open the Property inspector if it isn't already open, and click the Parameters button found in the lower half of the Property inspector. (Make sure the Property inspector is expanded.)
Here I clicked, added the behavior play so that when the page downloaded it played the tune....unlike the above that were linked and allowed the person the choice of playing...


To enter a value for a parameter in the Parameters dialog box:
1. Click the plus (+) button.
2. Enter the name of the parameter in the Parameter column.
3. Enter the value of the parameter in the Value column.
To remove parameters:
Select a parameter and press the minus (-) button.
To reorder parameters:
Select a parameter and use the up and down arrow buttons.

Setting Flash and Shockwave movie properties
To ensure the best results in both Internet Explorer and Netscape Navigator, Dreamweaver inserts Flash and Shockwave movies using both the object and embed tags. (The object tag is defined by Microsoft for ActiveX controls; embed is defined by Navigator for plug-ins.) To view the following properties in the Property inspector, select a Flash movie or a Shockwave movie. See also About Flash content, and Inserting Shockwave movies.
To see all Flash movie properties, click the expander arrow in the lower right corner.
Name specifies a name to identify the movie for scripting. Enter a name in the unlabeled field on the far left side of the Property inspector.
W and H specify the width and height of the movie in pixels. You can also specify the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), or % (percentage of the parent object's value). The abbreviations must follow the value without a space (for example, 3mm).
File specifies the path to the Flash or Shockwave movie file. Click the folder icon to browse to a file, or type a path.
Src specifies the path to a Flash source document (FLA), when Dreamweaver MX and Flash MX are both installed on your computer. To edit a Flash movie file (SWF), you update the movie's source document.
Edit lets you launch Macromedia Flash MX to update a FLA file. This button is disabled if you do not have Macromedia Flash MX loaded on your computer. For information about editing an inserted Flash movie, see Editing a Flash movie from Dreamweaver.
Reset Size returns the selected movie to its original size.
Loop, when checked, makes the movie play continuously; when unchecked, the movie plays once and stops.
Autoplay, when checked, automatically plays the movie when the page loads.
V Space and H Space specify the number of pixels of white space above, below, and on both sides of the movie.
Quality controls anti-aliasing during playback of the movie. A movie looks better with a high setting, but it requires a faster processor to render correctly on the screen. Low emphasizes speed over appearance, whereas High favors appearance over speed. Auto Low emphasizes speed at first, but improves appearance when possible. Auto High emphasizes both qualities at first, but sacrifices appearance for speed if necessary.
Scale determines how the movie fits into the dimensions set in the width and height fields. The Default setting displays the entire movie.
No Border fits the movie into the set dimensions so that no borders show and maintains the original aspect ratio.
Exact Fit scales the movie to the set dimensions, regardless of the aspect ratio.

Inserting Netscape Navigator plug-in content
Plug-ins enhance Netscape Navigator, providing ways to view media content in a wide variety of formats. Plug-ins are the means by which content files are played and displayed on your website. For example, typical plug-ins include RealPlayer and QuickTime, while some content files themselves include MP3s and QuickTime movies.
After you create content for a Navigator plug-in, you can use Dreamweaver to insert that content into an HTML document. Dreamweaver uses the embed tag to mark the reference to the content file.
To insert Navigator plug-in content:
1. In the Design view of the Document window, place the insertion point where you want to insert the content, then do one of the following:
• In the Insert bar, select Media and then click the Plugin icon.
• Choose Insert > Media > Plugin.
2. In the dialog box that appears, select a content file for a Navigator plug-in.

Playing plug-ins in the Document window
You can preview movies and animations that rely on Navigator plug-ins--that is, elements that use the embed tag--directly in the Design view of the Document window. (You cannot preview movies or animations that rely on ActiveX controls in the Document window.) You can play all plug-in elements at one time to see how the page will look to the user, or you can play each one individually to ensure that you have embedded the correct media element.
To play movies, the proper plug-ins must be installed on your computer. When Dreamweaver starts up, it automatically searches for all installed plug-ins, looking first in the Configuration/Plugins folder and then in the plugin folders of all installed browsers.
To play plug-in content in the Document window:
1. Insert one or more media elements by choosing Insert > Media > Shockwave, Insert > Media > Flash, or Insert > Media > Plugin.
2. Play plug-in content:
• Select one of the media elements you have inserted, and choose View > Plugins > Play or click the Play button in the Property inspector.
• Choose View > Plugins > Play All to play all of the media elements on the selected page that rely on plug-ins.
Note: Play All only applies to the current document; it does not apply to other documents in a frameset, for example.
To stop playing plug-in content:
Select a media element and choose View > Plugins > Stop, or click the Stop button in the Property inspector.
You can also choose View > Plugins > Stop All to stop all plug-in content from playing.

Troubleshooting Navigator plug-ins
If you have followed the steps to play plug-in content in the Document window, but some of the plug-in content does not play, try the following:
• Make sure the associated plug-in is installed on your computer, and that the content is compatible with the version of the plug-in you have.
• Open the file Configuration/Plugins/UnsupportedPlugins.txt in a text editor and look to see if the problematic plug-in is listed. This file keeps track of plug-ins that cause problems in Dreamweaver and are therefore unsupported. (If you experience problems with a particular plug-in, consider adding it to this file.)
• Check that you have enough memory (and on the Macintosh, check that enough memory is allocated to Dreamweaver). Some plug-ins require an additional 2 to 5 MB of memory to run.