Embedding Video and Audio into Dreamweaver Pages

This work is licensed under a Creative Commons License.

Embedding Video and Audio into Dreamweaver Pages

Extracted From: Macromedia Studio 8 for Dummies
www.wiley.com

Adding Audio and Video to Your Pages

You have two basic options, which are described in detail in the following sections, for adding downloadable audio and video to your

Web pages:

Embedding: You can embed an audio or video file to display a playback Select a console on a Web page that users can use to play, rewind, and fast-forward media file the media file. (You can also embed an audio file and make it invisible to create a background audio effect.)

Users must have an appropriate plug-in installed on their machines to play the embedded audio or video file. To ensure maximum compatibil¬ity, you may wish to use SWFs to present audio and video.

Linking: You can link to an audio or video file to give users the choice of whether or not to view that media file.

Keep in mind that most audio and video files are large C large enough that many folks impatiently click the Stop button on their browsers before a Web page chock-full of audio or video effects has a chance to finish loading. Keep the following basic rules in mind to help you use audio and video effectively in your Web pages:

Use audio and video only when plain text just won’t do.

Keep your audio and video clips as short (and corresponding file sizes as small) as possible.

Embeddinq an audio or video clip

You can embed an audio or video file by following these steps:

1 .In the Document Window click the location in your page where you want to add an embedded audio or video file.
2.Click and hold the Media button in the Common category of the Insert bar and select Plugin from the pop-up menu, or choose Insert=>Media=>Plugin.
3.In the File Name field in the Select File dialog box, enter the path or browse to the audio or video file that you want to embed, and click OK.
If the file is outside your current root directory, Dreamweaver asks whether you want to copythe file to your site’s root directory Click Yes.
4. In the Plugin Property inspector size the Plugin placeholder to any dimensions you prefer.

You can either enter a width and height in the W and H text fields in the Plugin Property inspector or you can drag a handle on the placeholder to manually resize.

Test in all your target browsers (the browsers your users are likely to View your site with) to ensure that users can view all the audio playback controls or video area and controls.

You can click the Play button in the Plugin Property inspector to play your media file without previewing your page in a browser.

Embedding background music:

Embedding background music (music that plays automatically after the user opens a page) inyour page can be controversial because users may be unpleasantly surprised by audio when they are expecting silence, and because users have no way to turn off the music from within the browser. If you still want to embed background music in your page, follow these steps:

1 . In the Document window, click the location in your page where you want to add an embedded audio file.

This should be an out-of-the-way location, like the bottom of your page, so the embedded audio doesn’t create an awkward space in your design.

2.Click and hold the Media button in the Common category of the Insert bar and select Plugin from the pop-up menu, or choose Insert=>Media=>Plugin.

The Select File dialog box appears.

3.In the File Name field in the Select File dialog box, enter the path to the audio file that youwant to embed, and click OK.

If the file is outside your current root directory, Dreamweaver asks whether you want to copythe file to your site’s root directory. Click Yes.

4.Enter a width and height of 2 in the W and H text fields in the Plugin Property inspector.

5.Click the Parameters button to open the Parameters dialog box.

6.In the Parameters dialog box, click the Add (+) button to add a new parameter.

7.Click in the Parameter column and type hidden.

8.Type true in the Value column.

Steps 7 and 8 hide the audio playback controls.

9.Click OK to complete the process and close the dialog box.

Linkinq to an audio or video clip

A simple and relatively trouble-free way to include audio and video clips on a Web page is to link the page to an audio or video file. Users can click the link if they want to hear or watch the clip. This selection opens a player outside the browser where the user can control playback.

You follow the same steps to create a link to an audio or video file that resides embedded in your root folder as you do to create a link to a Web page; the only difference is that you specify a media file instead of a URL for the link.

Adding Other Media

Dreamweaver enables you to easily insert a number of other multimedia for-mats into your Web pages, including ActiveX, Java Applets, Macromedia Flash, and Shockwave. After inserting any of these media formats, you can set the control and playback features of the media in the Parameters dialog box. Additionally, you can fine-tune the media action on your page by using the Behaviors panel to create triggering actions that cause the media to play, stop, and execute other functions.

Follow these directions to insert other media:

1 . In the Document window, click the location in your page where you want to add a multimedia file.
2. Click and hold the Media button in the Common category of the Insert bar to view all the object types that you can insert, and click the icon of the type of media file you want to insertt.

Alternatively, you can choose Insert=>Media=>Media Type, where Media Type is the type of media file you want to insert.

The Select File dialog box appears.

For Applet, Macromedia Flash, and Shockwave files: In the File Name field in the Select File dialog box, enter the path to the media and click OK. Your file is inserted and the associated Property inspector appears. You can change the selected file in the Plugin Property inspector by typing a new name in the File text field or by browsing in the File folder to select a file (for Applets, use the Code text field). Select the Embed check box if you want Netscape Navigator users to have access to the Applet.

For ActiveX: An ActiveX placeholder is inserted and the ActiveX Property inspector appears. Enter the name of the ActiveX object you want to play in the Class ID text field. Select the Embed checkbox if you want Netscape Navigator users to have access to the
ActiveX object.

3. In the Property inspector for your selected media, enter dimensions Product in the W and H text fields to size the Media placeholder to any dimenension you choose.
4. In the Property inspector for your selected media, click the Parameters button to open the Parameters dialog box, where you can add paraine¬ters Qike width, height, loop, and autoplay) appropriate to the selected
media type.

Top