没什么好介绍的！穷屌丝一个~
分类：
2008-03-16 23:33:47
Embedding a presentation in your Web page provides seamless playback without launching RealPlayer as a separate application. You can even include RealPlayer controls such as fast forward and pause. This chapter explains how you add mark-up to your Web page so that people view your RealSystem G2 presentation directly through their Web browsers.
| Additional Information | |
|---|---|
| Refer to this chapter for full information on embedding a presentation. For a quick example of how to embed a video in a Web page, see . |
To provide Web page playback, RealPlayer includes a plug-in for browsers that support the Netscape plug-in architecture:
It also has an ActiveX control that provides playback capabilities within these products:
Because they both have the same capabilities, you can use either the plug-in or the ActiveX control depending on which products you need to support. The following sections describe the basics of using the plug-in or the control, then explain each parameter you can set.
| Note | |
|---|---|
| Familiarity with RealPlayer and HTML will make it easier to use the plug-in or control. In the examples below, ellipses (...) indicate information left out to keep the examples short. Make sure your tags include all necessary information. |
| Additional Information | |
|---|---|
| Embedded RealPlayer Extended Functionality Guide at explains how to use JavaScript or VBScript to extend the functionality of the Netscape Plug-in or ActiveX control. |
To use RealPlayer's Netscape plug-in, you add tags to your Web page HTML. Each tag has three required parameters (SRC, WIDTH, HEIGHT), and can include many optional parameters. The basic tag looks like the following (the SRC value, which is explained below, has been omitted for simplicity):
This tag creates a playback area 300 pixels wide by 134 pixels high within the Web page. Parameters typically have the form PARAMETER=value. The parameter names can be any case, though this manual shows them uppercase. Except for file names, which must typically be lowercase, parameter values are not case-sensitive. Unless they are URLs, parameter values do not need to be inside quotation marks.
To accommodate browsers that do not support the Netscape plug-in, use In this example, browsers that can play the embedded presentation hide the text between You embed the RealPlayer ActiveX control in HTML pages with the The This tag creates a playback area 300 pixels wide by 134 pixels high within the Web page. Between Both the Netscape plug-in and ActiveX control use the same basic tag parameters. As explained above, the tag syntax for the plug-in and the control differs, however. The following sections explain the basic parameters you can include in each The When you use the Netscape plug-in, you need to include the SRC parameter in every
tag and display just the hypertext link. The user then clicks the link to play the presentation in RealPlayer.Using
tag. This tag uses an ID that you select, such as ID=RVOCX, and must have the following class ID that identifies RealPlayer:
CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"
tag also sets the width and height of the playback area within the browser. A typical tag looks like this:
and , you can define any number of additional parameters in this form:
PARAM, NAME, and VALUE markers can be any case, though this manual shows them uppercase. Parameter values are not case-sensitive except for file names, which must typically be lowercase. Always enclose parameter values in double quotation marks.Setting Basic Parameters
or tag.SRC
SRC parameter gives the presentation's source URL surrounded by double quotes. The directory names cannot contain spaces. For the ActiveX control, the tag's CLASSID parameter causes the presentation to play back in the Web page, so you can simply link to the SMIL file or clip within one tag. When linking to a presentation on RealServer, the URL can use Ramgen, but this is not necessary:
tag. You can specify two types of URLs. The first uses the ?embed option to RealServer's Ramgen, which causes RealPlayer to play the clip or SMIL presentation through its Netscape plug-in instead of launching as a separate application:
SRC="?embed"
Additional Information
For more on Ramgen and presentation URLs, see .
The second option is to create a Ram file with a .rpm extension and list this file in the SRC parameter without including Ramgen and the ?embed option. The Ram file then links to your SMIL file or clips. The following example links to a .rpm file on a Web server:
SRC=""
| Additional Information | |
|---|---|
| For instructions on writing a .rpm file, see . |
You must create and link to a .rpm file in any of the following situations:
| Note | |
|---|---|
When linking to local files, you can use relative links or absolute links. When you use absolute links with the Netscape plug-in, though, use forward slashes in paths. For example, instead of file://c:\media\first.rpm, set the source as file://c:/media/first.rpm. |
Required for each or tag, the WIDTH and HEIGHT parameters set the size of the playback area. If you leave them out, the playback area may appear as a tiny icon because streaming media presentations do not size automatically. The values for WIDTH and HEIGHT are in pixels by default, so a width of 300 creates a playback area 300 pixels wide. Setting WIDTH and HEIGHT to 0 (zero) hides the playback area.
You can also express WIDTH and HEIGHT as percentages of the browser window size. For example, a width of 50% makes the presentation area half the browser width. Keep in mind that different types of media scale with different results. A video scaled larger than its encoded size may not look good. Vector-based media such as Flash with RealSystem G2 animation scale more easily to fit different playback areas, however.
Setting NOJAVA to true in every tag prevents the browser's Java Virtual Machine (JVM) from starting if it is not yet running:
This is recommended when using the Netscape plug-in because the JVM is not required for the parameters described in this chapter. Starting the JVM therefore delays presentation playback unnecessarily. The JVM is required only when extending plug-in functionality with JavaScript. In this case, omit NOJAVA entirely from the tags.
| Additional Information | |
|---|---|
| See Embedded RealPlayer Extended Functionality Guide at for more information on controlling RealPlayer with JavaScript. |
| Note | |
|---|---|
Although you can include NOJAVA as an ActiveX parameter, it has no effect on Internet Explorer, which launches its JVM on browser start-up. |
With the CONTROLS parameter, you can place RealPlayer controls such as a play/pause button in your Web page. A visitor to your page can then control the presentation playback just as if using RealPlayer as a separate application. The following example for the Netscape tag displays the play/pause button:
For the ActiveX control, you define a CONTROLS parameter within the tag structure:
The following sections describe each RealPlayer control you can use. A tag's WIDTH and HEIGHT parameters set the control's size. The suggested pixel widths and heights given below produce embedded controls approximately the same sizes as the RealPlayer controls. Specifying different pixel sizes scales the controls larger or smaller. You can also use percentage values for sizes, but this is recommended only for the image window.
| Additional Information | |
|---|---|
| For information on adding more than one control to your Web page, see . |
| Tip | |
|---|---|
| If you have installed RealPlayer G2, to see a Web page with all the embedded controls. |
Displays the image window. This is available only for display presentations such as video or animation. Even if no other controls are visible on the page, the user can typically right-click (on Windows) or hold down the mouse button (Macintosh) on the playback area to display a menu of choices such as Play and Stop. See also .
| Suggested pixel width: | 176 or higher |
| Suggested pixel height: | 132 or higher |
Displays the basic RealPlayer control panel. The control name "default" also works. Buttons include play, pause, stop, fast forward, and rewind. Sliders include a position slider and a volume slider with mute button that pops up when the speaker button is clicked. Below the buttons are a clip information field, a status panel, a network congestion indicator, and a clip timing field.
| Suggested pixel width: | 375 |
| Suggested pixel height: | 100 |
Displays the play, pause, stop, fast forward and rewind buttons. There's also a position slider, along with a volume slider and mute button that pops up when the speaker button is clicked.
| Suggested pixel width: | 350 |
| Suggested pixel height: | 36 |
Displays a play/pause button.
| Suggested pixel width: | 44 |
| Suggested pixel height: | 26 |
Displays a play button.
| Suggested pixel width: | 26 |
| Suggested pixel height: | 26 |
Displays a pause button.
| Suggested pixel width: | 26 |
| Suggested pixel height: | 26 |
Displays a stop button.
| Suggested pixel width: | 26 |
| Suggested pixel height: | 26 |
Displays a fast forward control.
| Suggested pixel width: | 26 |
| Suggested pixel height: | 26 |
Displays a rewind control.
| Suggested pixel width: | 26 |
| Suggested pixel height: | 26 |
Displays a mute button.
| Suggested pixel width: | 26 |
| Suggested pixel height: | 26 |
Displays a mute button and volume slider.
| Suggested pixel width: | 26 |
| Suggested pixel height: | 88 |
Displays a volume slider.
| Suggested pixel width: | 26 |
| Suggested pixel height: | 65 |
Displays a clip position slider.
| Suggested pixel width: | 120 |
| Suggested pixel height: | 26 |
Displays a clip information field. For instructions on formatting the clip playlist, see .
| Suggested pixel width: | 370 |
| Suggested pixel height: | 32 |
Displays the Real™ logo.
| Suggested pixel width: | 45 |
| Suggested pixel height: | 25 |
Displays presentation information along with the volume slider and mute button. For more on presentation information, see . See also .
| Suggested pixel width: | 325 |
| Suggested pixel height: | 55 |
Displays the presentation information panel. For more on presentation information, see . See also .
| Suggested pixel width: | 300 |
| Suggested pixel height: | 55 |
Displays the status panel, which shows informational messages. It also includes the network congestion LED and the position field, which shows current place in the presentation timeline along with total clip length.
| Suggested pixel width: | 300 |
| Suggested pixel height: | 30 |
| Note | |
|---|---|
The status bar is included in the All control. If you do not embed a status bar or status field in your page, error messages display in the browser's status bar. |
Displays the message text area of the status bar. If you do not embed a status field or status bar in your page, error messages display in the browser's status bar.
| Suggested pixel width: | 200 |
| Suggested pixel height: | 30 |
Displays the position field, which shows the clip's current place in the presentation timeline and the total clip length.
| Suggested pixel width: | 90 |
| Suggested pixel height: | 30 |
The CONSOLE parameter defines a name that unifies or tags so that multiple controls work together. For example, you could create three separate or tags to define an image window, a play button, and a stop button. By using three tags, you can set the size of each control separately and define its layout with HTML tags. You could put each control in a different HTML table cell, for example.
To tie controls together, define the same CONSOLE name within each or tag, or use one of these predefined names:
_master links the control to all other embedded controls on the page.
_unique links the control to no other embedded controls on the page.
You can have multiple console names for separate presentations. For a page showing two video clips, for example, you can define console names of video1 and video2. All controls linked by video1 interoperate and all controls linked by video2 interoperate. But a video1 volume slider, for example, will not affect the volume of a video2 clip.
Note the following when grouping multiple controls with CONSOLE attributes:
SRC attribute. Tags linked by a console name should have the same SRC value.
SRC value.
SRC values, the first valid source that RealPlayer finds among those choices becomes the console source. This may not always be the first source listed.
The following examples for the and tags set up an image window and two sets of controls (a play button and stop button) for separate videos, sample1.rm and sample2.rm. The predefined console name _master links the image window to both control sets. The control sets use different console names, however, so they do not link to each other. Clicking each play button therefore starts a different video.
Because each tag must have a SRC value, the image window in the following example simply uses the same source as the first play button. The viewer simply clicks either play button to start a video. Clicking the other play button stops the first video and plays the second video.
Video 1
Video 2
In the following ActiveX example, only the controls for the two play buttons define the source URLs. For convenience the CLASSID value is omitted.
Video 1
Video 2
The following and parameters control aspects of how clips play back.
This parameter specifies a background color for the image window. The specified background color also shows through if a clip includes transparency. The background color is black by default. You can use an RGB hexadecimal color value (#RRGGBB) or the following color names, shown here with their corresponding RGB values:
white (#FFFFFF) |
silver (#C0C0C0) |
gray (#808080) |
black (#000000) |
yellow (#FFFF00) |
fuchsia (#FF00FF) |
red (#FF0000) |
maroon (#800000) |
lime (#00FF00) |
olive (#808000) |
green (#008000) |
purple (#800080) |
aqua (#00FFFF) |
teal (#008080) |
blue (#0000FF) |
navy (#000080) |
| Note | |
|---|---|
| SMIL region background colors override this background color. For more on setting SMIL region colors, see . |
The default value for CENTER is false, which causes the clip to fill the entire playback area. If you set CENTER to true, the clip is centered within the playback area and displays at its encoded size. So by setting CENTER to true, you can create a large playback area with WIDTH and HEIGHT and still have the clip play at its normal size. You cannot use CENTER along with MAINTAINASPECT.
This parameter, which you cannot combine with CENTER, determines whether the clip's height-to-width ratio stays constant when the clip scales to fit the image window. The default value of false causes this ratio to change as necessary to fill the image window fully. This may distort the source image.
If you set MAINTAINASPECT to true, a clip's height-to-width ratio stays constant. For example, a clip's height-to-width ratio of 1:1 stays constant even if the image window's height-to-width ratio is 2:3. In these cases, the clip is centered in the image window and scaled until one dimension reaches the window's boundaries and the other dimension is within the boundaries. The following figure shows how clips scale by default, with MAINTAINASPECT set to true, and with CENTER set to true.
When you use a control that includes presentation information such as title, author, and copyright, you can include the NOLABELS option to suppress that information. Here is an example for the Netscape plug-in:
and an example for the ActiveX control:
When set to true, NOLOGO prevents the Real logo from displaying in the image window. When no clip is playing, only the specified background color shows in the window. The parameter is false by default.
The AUTOSTART, LOOP, and NUMLOOP parameters let you set the content to start playing automatically, as well as loop continuously for a specified number of times. The following example shows two of these parameters used with the Netscape plug-in:
Here is an example for the ActiveX control:
When set to true, the AUTOSTART parameter starts playback immediately. When you have multiple or tags linked by a CONSOLE name, set AUTOSTART to true in just one tag. Leaving AUTOSTART out or setting its value to false means the presentation does not start until the user starts it, for example, by clicking an embedded play button.
If the LOOP parameter is set to true, the presentation continuously loops until the viewer stops it. When you have multiple or tags linked by a CONSOLE name, set looping in just one tag. If you leave the LOOP parameter out, the default value of false applies and the presentation stops after the first playback. The user can play the presentation again by clicking the play button.
If you specify a NUMLOOP value such as "2", the presentation loops the specified number of times and then stops. If both LOOP and NUMLOOP are used, the LOOP parameter is ignored.
The SHUFFLE parameter is for use only with Ram or SMIL files that list a single sequence of clips. When set to true, SHUFFLE makes RealPlayer play back the clips in a random order.
As explains, you can use a SMIL file to define separate playback regions for different parts of a presentation. This lets you lay out two clips side-by-side, for example. When playing a presentation in a Web page, you can define the layout in SMIL or in HTML.
To control the layout through SMIL, you set up the regions and their relative placements in the SMIL file. You then use the Netscape plug-in or ActiveX control to create a playback region in the Web page large enough to accommodate all regions. This SMIL file then produces the same layout when played through the Web page or RealPlayer.
The sample layout shown in defines three regions, creating a total playback area 430 pixels wide by 165 pixels high. To accommodate this in your Web page, you define an image window at least as large as this through the or tag. Here are examples for the Netscape plug-in:
and ActiveX control:
The SRC parameter provides the URL to the SMIL file. You can then use additional or tags linked to the "one" console to provide RealPlayer controls for the presentation.
| Additional Information | |
|---|---|
| If you have installed RealPlayer G2, to see a demonstration with a SMIL layout embedded in a Web page. to see the same demonstration play in RealPlayer. |
The second method omits SMIL layout information and defines the layout through HTML. You could place an image window and separate RealPlayer controls in an HTML table, for example. Each or tags then uses a REGION parameter to define a region name. Clip source tags within the SMIL file list which region each clip plays in. For example, the SMIL file shown in lists the following RealText file, set to play in the newsregion region:
Within the HTML page, the tag that plays news.rt would look like this:
The tag would look like this:
You define similar or tags to create other regions for other clips listed in the SMIL file. The SRC parameter in each tag lists the same SMIL file. You can also use additional or tags linked to the same console to provide RealPlayer controls for the presentation.
| Additional Information | |
|---|---|
| If you have installed RealPlayer G2, to see a SMIL demonstration embedded in a Web page with an HTML layout. |
When you define the presentation layout through HTML, you must omit the
region="newsregion"/>
| Note | |
|---|---|
| A SMIL file without a layout still works with RealPlayer G2, but RealPlayer automatically creates the layout, and the results may not be what you expect. Always include a SMIL layout when playing a presentation directly in RealPlayer. |
The following table lists the and tag parameters. Parameters compatible with RealPlayer 5.0 are indicated in the "5.0?" column. To have an embedded presentation play back with RealPlayer 5.0 as well as RealPlayer G2, use only 5.0-compatible parameters.
| Parameter | Function | 5.0? | Values | Default | |
|---|---|---|---|---|---|
|
Sets automatic playback. | yes | true|false |
false |
|
|
Sets background color. | no | color name or RGB hex value | black |
|
|
Centers clip in window. | no | true|false |
false |
|
|
Links multiple controls. | yes | name, _master, or _unique |
(none) | |
|
Adds RealPlayer controls. | yes | control name | All |
|
|
Sets window or control height. | yes | percentage or pixels | (none) | |
|
Loops clips indefinitely. | no | true|false |
false |
|
|
Preserves image aspect ratio. | no | true|false |
false |
|
|
Prevents JVM start-up. | no | true|false |
false |
|
|
Suppresses presentation information. | yes | true|false |
false |
|
|
Suppresses RealLogo. | no | true|false |
false |
|
|
Loops clip a given number of times. | no | any number | (none) | |
|
Ties clip to SMIL region. | no | SMIL region | (none) | |
|
Randomizes playback. | no | true|false |
false |
|
|
Specifies source clip. | yes | URL | (none) | |
|
Sets window or control width. | yes | percentage or pixels | (none) |
© 1998
For information on RealNetworks' technical support, .
Comments on this document? .
This file last updated on 12/18/98 at 14:36:36.
我想这些资料够你用了，你可要有耐心呀！ 【基本概念】 在进行设计之前，我们先来了解一些相关的基本概念。 1、