Working with Video Clips

Unless you're working with streaming media, working with video clips in both Dreamweaver and the browser is extremely easy and generally self-explanatory. For the most part, you add a media file by embedding the file into the web page (discussed later), save the document, and then view the page in the desired browser. Depending on the media type you decide to use, the browser recognizes the format, launches the appropriate plug-in (if it exists), and plays the video. If the browser can't play the video (maybe the plug-in doesn't exist), you have the option of manually providing the location of the media player's plug-in.

In general, if you're working with short video clips (1020 seconds in length) it's okay to embed the video clips into the web page so that when the user clicks the file, a progressive download is forced. A second option is to simply create links on your Web page that users can click to download the media file and play the files on the computer later. When viewed in a media player, a video file typically resembles Figure 18.1.

Figure 18.1. All media players typically have a beginning, an end, progress indicator, a play position, a volume bar, and a traditional play button.

Most media players look and function similarly. They all have a beginning, an end, a progress indicator, a play position, a volume bar, and traditional play, stop, and pause buttons.

In terms of video formats to use in your web pages, QuickTime movies (MOV), AVI, MPG, Windows Media Video (WMV), RealMedia (RM), and Flash Video (FLV) make good candidates because these are the most widely supported formats by the four media players. With that said, MOV, RM, WMV, and FLV files have been included with the files you downloaded for this chapter so that you can follow along with the examples.

Linking Video

One of the simplest methods for allowing users access to your video files is to create links directly from your website. In this scenario, the user clicks the link, the browser figures out which plug-in it needs to launch, and the file plays either in the browser or externally in the media player (if the browser didn't find the appropriate browser plug-in). To create a link to video in a web page, follow these steps:

1.	Open the linkingvideo.htm page included with the downloaded files for this chapter. You'll notice that three bullet points exist for linking the three types of media files (located in the Media folder).
2.	Highlight the first bullet point (View QuickTime version) and drag the point-to-file icon into the surfing.mov file located in the Media folder.
3.	Repeat steps 1 and 2 for the other two bullet points, linking the RealMedia bullet point to the surfing.rm file and Windows Media bullet point to the surfing.wmv file. When you've finished, you should have three bulleted links, each pointing to a different media type.
4.	Save your work.

Preview the page in the browser by selecting the Preview in Browser option from the Document bar (or by pressing F12). When the page loads in the browser, click the QuickTime link. You'll quickly notice that the QuickTime movie is progressively downloaded and played in a new browser instance.

Of course, you can right-click the link and choose the Save Target As option from the context menu to save the media file to disk for playback later. In this case, you would save the file to your hard drive. When you're ready to view the video, double-click the file; the appropriate media player opens and begins playing the file.

Embedding Video

In the previous section, you explored a possibility for allowing users to access your media files by linking the video files to your web page. The obvious drawback to this method is that, when the link was clicked, the media file progressively downloaded and played in a new browser window instance. Essentially, the user was taken away from your site and forced to watch the video in a blank browser page, interrupting the overall user experience of your website. This video-watching experience could be enhanced by allowing your users to watch the video clip directly on the Dorknozzle page through a process known as embedding. By embedding video clips into the page, the browser forces the progressive download of the file directly within the context of the overall design. Embedding video gives the web designer control over other options including sizing, vertical and horizontal spacing, specifying a plug-in source, alignments, borders, and more. To embed a video into a web page, follow these steps:

1.	Open the embeddingvideo.htm page included with the downloaded files for this chapter.
2.	To embed a video within the page, choose Insert, Media, Plug-in. The Select File dialog appears.
3.	Browse to the surfing.mov file and click OK. Alternatively, you can embed a media file into a Web page by dragging it from the Files panel and into the page. Either method creates a small 32-pixel-by-32-pixel icon on the page similar to the one shown in Figure 18.2. Figure 18.2. When media elements are embedded into the page, a small 32-pixel-by-32-pixel icon is created by default.
4.	You can resize the default icon to match the size of the video it will play. Because the surfing.mov video file is 320 pixels by 240 pixels, select the plug-in icon and enter the values 320 and 240 in the W and H text boxes in the Properties Inspector.
5.	Save your work.

Preview the page in the browser by selecting the Preview in Browser option from the Document bar (or by pressing F12). When the page loads in the browser, the movie is downloaded and played within the context of the overall design, similar to Figure 18.3.

Figure 18.3. Embedding a video gives you the opportunity to play a video within the context of the overall design.

You probably noticed that other options became available in the Properties Inspector when you selected the plug-in icon:

• Clip Name: Enter a name in this text box to uniquely identify the media file.

• W and H: Enter numeric values in these two text boxes to set the width and height (in pixels) of the media file.

• Src: Displays the full path to the media file.

• Plg URL: Enter the URL for the company of the specific media type. This way, if users don't have the specific plug-in installed, they can visit the URL you attach to download the appropriate plug-in.

• Align: Choose an option from this menu to set the alignment of other elements on your web page in relation to the media file. Options include Default, Baseline, Top, Middle, Bottom, TextTop, Absolute Middle, Absolute Bottom, Left, and Right.

• Play: Click this button to play the media file directly in Dreamweaver.

• Class: When working with CSS, apply a custom class to the media file by choosing the class from this menu.

• V and H: Enter numeric values in these text boxes to set the vertical and horizontal spacing (in pixels) around the media file.

• Border: Enter a numeric value in this text box to set the border size (in pixels) around the media file.

• Parameters: QuickTime movie and RealMedia files allow you to specify parameters for the movie to control looping, movie speed, whether or not to show the menu bar, and so on. Passing parameters into the video file is covered with more detail in the next section.

Passing Parameters into Video Files

In the last section, we looked at embedding video clips into a web page. You saw that the Properties Inspector exposes various attributes for the embedded video including the movie name, the source of the file (Src), the width and height of the clip (W and H), and the web site or location of the plug-in if it is not found on the user's browser (Plg URL). The Properties Inspector exposes numerous properties supported by the embedded video, but it doesn't expose them all. A number of other properties can be added to the embedded video to control aspects of the video clips using the Parameters dialog. QuickTime and RealMedia files can also accept parameters passed to the file from the web page.

Table 18.2 outlines parameters supported by QuickTime video clips.

Table 18.2. Supported QuickTime Parameters

QuickTime Parameter	Values
Autoplay	TRue or False
Bgcolor	Hexadecimal value or valid HTML color
Cache	TRue or False
Controller	TRue or False
Dontflattenwhensaving	Added to the tag as an attribute with no values
Endtime	A number
Height	A value in pixels
Hidden	Added to the tag as an attribute with no values
Href	A URL
Kioskmode	true or False
Loop	true, False, or palindrome (causes the movie to play alternately forwards and backwards; useful when working with QuickTime Virtual Reality (QTVR) movies)
Movieid	A number
Moviename	A name
Playeveryframe	true or False
Pluginspage	www.apple.com/quicktime
Qtnextn	A URL
Qtnext	Used to specify the URL of a movie to load and play at the end of the current movie
Qtsrc	A URL
Qtsrcchokespeed	Gives content developers the ability to specify the data rate of a movie being served regardless of the connection speed an end user has; may be useful when a particular movie is requested from a server by large volumes of users to eliminate congestion in routers
Scale	Tofit, aspect, or a number (default is 1)
Starttime	A number
Target	Name of a valid frame or window (_self, _parent, _top, or _blank)
Targetcache	true or False
Volume	A number from 0 to 100
Width	A value in pixels

TIP

As you can see, numerous parameters and parameter values exist for QuickTime movies. Because all these parameters and their associated values are beyond the scope of this book, refer to http://www.apple.com/quicktime/tutorials/embed.html for a complete reference.

You can use these parameters for a QuickTime movie by simply entering the parameter and value pair in the Parameters dialog. For instance, if you wanted to loop the movie when it ends in the browser, you would use the Loop parameter and set it to true. To add this parameter to your movie, follow these steps:

1.	Open the embeddingvideo.htm page if it's not open already.
2.	Replace the existing Select the plug-in icon on the page and click the Parameters button in the Properties Inspector. The Parameters dialog appears.
3.	Enter the parameter name Loop in the Parameter column and the value TRue in the Value column similar to Figure 18.4. Figure 18.4. Enter the Loop parameter and set the value to True.
4.	Click OK.
5.	Save your work.

Preview your page in the browser by choosing the Preview in Browser option from the Document bar (or by pressing F12). This time the movie loops as soon as it reaches the end.

Similar to QuickTime movie files, RealMedia files can also accept parameters. Table 18.3 outlines the parameters supported by RealMedia files.

Table 18.3. Supported RealMedia Parameters

RealMedia Parameter	Values
Autostart	TRue or False
Console	Name, _master, _unique
Controls	All, controlpanel, imagewindow, infovolumepanel, infopanel, playbutton, positionslider, positionfield, statuspanel, statusbar, stopbutton, statusfield, and volumeslider
Nolabels	true or False

TIP

As was the case with QuickTime parameters, numerous parameters and parameter values exist for RealMedia files. Because all these parameters and their associated values are beyond the scope of this book, refer to http://www.realnetworks.com/resources/howto/embedded for a complete reference.

By default, RealMedia files have an interface that resembles Figure 18.5 when viewed in the browser. As you can see, the default interface is non-intuitive and doesn't resemble a typical RealMedia player interface.

Figure 18.5. The default RealMedia interface isn't intuitive by default.

With the addition of a couple parameters, we can customize this interface to look a bit more traditional. To do this, follow these steps:

1.	With the embeddingvideo.htm page open, select the existing QuickTime movie in the Document window and delete it.
2.	Choose the Insert, Media, Plug-in option. Browse to the surfing.rm movie and click OK.
3.	When the plug-in icon appears on the page, select it and change the width and height properties in the Properties Inspector to 320 by 240.
4.	Click the Parameters button in the Properties Inspector to launch the Parameters dialog.
5.	Add the two parameters Autostart and Controls, setting their values to TRue and Imagewindow respectively. The result resembles Figure 18.6. Figure 18.6. Enter the Autostart and Controls parameters for the RealMedia file.
6.	Click OK.
7.	Save your work.

Preview your page in the browser by choosing the Preview in Browser option from the Document bar (or by pressing F12). This time, the movie starts automatically and doesn't display the control panel as it did in Figure 18.5.

Encoding Flash Video

As mentioned earlier, Flash Video is the newest video format supported by Flash Player 7 and above. Working with Flash Video on the web is similar in process to the other three video formats save for a few minor nuances. First, a standard video file must be encoded using the Flash Video Encoder. Second, the resulting Flash Video file must be imported into the web page in Dreamweaver, as explained in more detail in the next section.

The first and most important step for working with Flash Video in your Web pages is to encode a standard video file into the Flash Video format. This can be handled is one of many ways. Out of the box, Flash provides the Flash Video Encoder you can use to encode a standard video file into the Flash Video format. To encode a video file into the Flash Video format, follow these steps:

1.	Assuming that you have Flash installed, locate the program directory and choose the Flash Video Encoder program. The application launches and presents an interface similar to Figure 18.7. Figure 18.7. The Flash Video Encoder interface.
2.	As you can see from Figure 18.7, the interface is fairly simple and requires little explanation. To encode a Flash Video file, add a video file to the list, modify the encoding settings as needed, and then begin the queue processing. It's at this point that the Flash Video Encoder encodes your file format to the Flash Video format. Before we get too ahead of ourselves, however, let's add the movie to the queue list. To do this, click the Add button. The Open dialog appears. Browse to the surfing.wmv file and click Open. The movie file format appears in the list.
3.	By default, video files are encoded using the default Medium Quality setting (as shown in the Settings column). To modify this setting, click the Settings button. The Flash Video Encoding Settings dialog appears, similar to Figure 18.8. Figure 18.8. Use the Flash Video Encoding Settings dialog to change the default encoding settings for the Flash Video file.
4.	Initially, the Flash Video Encoding Settings dialog displays an encoding profile drop-down menu. From this menu, select a predefined encoding setting (options include Flash 7 and Flash 8 and quality settings from Low to High). You can also click the Show Advanced Settings button to display a complete list of modifiable settings. One of the many settings we might want to take advantage of from this list is Crop and Trim. Switching to this tab reveals cropping sliders you can use to crop the black border out of the video file.
5.	Experiment with the many settings available from the Show Advanced Settings menu. For now, limit your video modifications to cropping the black border and click OK.
6.	To begin the encoding, click the Start Queue button. The Flash Video Encoding Settings dialog begins encoding the video file frame by frame. The progress is tracked with the progress indicator similar to Figure 18.9. Figure 18.9. The progress indicator displays the encoding progress.
7.	When the encoding finishes, close the Flash Video Encoding Settings dialog by clicking the close button in the top-right corner of the dialog.

The new surfing1.flv file appears in the Media folder of the Dorknozzle project.

Of course, you don't have to use the Flash Video Encoder exclusively. The following programs also support encoding of Flash Video:

• Adobe After Effects 5.5 and 6.0

• Apple Final Cut Express

• Apple Final Cut Pro (3.x and 4.x)

• Apple QuickTime Player 6.3

• Avid Media Composer

• Avid Xpress DV and Avid Xpress Pro

• Sorenson Squeeze

Unless you're using Sorenson Squeeze, you'll need to install the Flash Video Exporter to encode Flash Video directly from the programs just listed. The Flash Video Exporter can be found at the following URL: http://www.macromedia.com/devnet/mx/flash/articles/flv_exporter.html.

Embedding Flash Video

One of the newest features built into Dreamweaver 8 is the ability to insert and customize various parameters of Flash Video files directly. Formerly a $99 software purchase known as the Flash Video Kit, Macromedia now includes the unique functionality in Dreamweaver 8. To embed a Flash Video file in a web page using Dreamweaver 8, follow these steps:

1.	Open the embeddingvideo.htm page if it's not open already.
2.	Select the current video clip (surfing.rm) in the Document window and remove it by pressing the Delete key on your keyboard.
3.	To import the FLV file created in the previous section, choose Insert, Media, Flash Video. The Insert Flash Video dialog appears (see Figure 18.10). Figure 18.10. The Insert Flash Video dialog facilitates the modification and subsequent insertion of Flash Video files into your Web pages.
4.	Later in this section, we'll discuss the various properties exposed in this dialog. For now, click the Browse button and locate the surfing1.flv file.
5.	Enter the values 320 for width and 240 for height and click OK. The Flash Video file is inserted into your web page similar to Figure 18.11. Figure 18.11. The Flash Video file is inserted into your web page.
6.	Save your work.

To view the Flash Video file in the browser, choose the Preview in Browser option from the Document bar (or press F12). Notice that the video file appears in the browser. Click the Play button to begin playing the clip.

Aside from simply browsing to and inserting a Flash Video file into the web page, you can also customize the following parameters exposed by the Insert Flash Video dialog:

• Video type: Select one of the two options from this menu to have the video file either progressively download or stream to the user.

• URL: Enter the relative or absolute path of the Flash Video file in this text box.

• Skin: Choose a skin for the video file. The skin you choose here customizes the look of the playback controls as well as the progress indicator.

• Skin preview: This window displays an image preview of the skin you choose from the Skin drop-down menu.

• Width and Height: Enter the width and height (in pixels) for the video file.

• Constrain: Enable this check box to automatically constrain (maintain the aspect ratio of) the width and height of the video file.

• Detect Size: If you've forgotten the width and height of the video file, click this button to automatically detect these values for the selected video file.

• Auto Play: Enable this check box to have the video file automatically begin playing when the page loads for the first time or when the browser is refreshed.

• Auto Rewind: Similar to loop functionality, enable this check box to have the video file automatically rewind and begin playing if the Auto Play check box is enabled.

Depending on your needs, customize the properties as you see fit.