Combining streaming media playback with digital downloads, RealOne Player integrates the features found in previous versions of RealPlayer and RealJukebox, adding Web browsing as well. This chapter describes RealOne Player's three-pane environment, and introduces you to the powerful production techniques that you can use to create compelling streaming media presentations.
RealOne Player integrates streaming media with HTML pages simply and effectively. Because previous versions of RealPlayer did not natively display HTML pages, linked pages opened in the viewer's default Web browser, which split the presentation between separate applications. RealOne Player closes this divide, benefitting both the viewer, who does not have to switch between applications to watch an integrated presentation, and the presentation author, who can more easily coordinate streaming media with Web pages.
As with past RealPlayers, you can still embed streaming media in any Web page that viewers display in their favorite Web browsers. Although embedding is a widely used means of integrating streaming media with HTML content, the required embedding markup can be cumbersome. With RealOne Player, you can keep your streaming media and HTML pages separate, coordinating the two with simple production techniques. This reduces the work required to stream media and display HTML pages simultaneously.
The following figure illustrates the three-pane environment of RealOne Player, which is based on the metaphor of "play/more/explore." Here, the Media Playback pane plays streamed or downloaded clips. The Related Info pane gives the viewer more information about the presentation. And the detachable Media Browser pane lets the viewer explore the World Wide Web. This design gives you one pane for playing media, one pane for displaying small HTML pages related to the media, and one pane for showing large Web pages, such as your home page.
The media playback pane hosts media clips and includes buttons for play, pause, rewind, volume control, and so on. Any streaming or downloaded media playable in RealOne Player can display in this pane. This includes the core clip types and markup languages:
In addition, RealOne Player can play many other media types, including MPEG audio and video. Chapter 2 introduces you to the media production concepts and practices that you use to create streaming media clips that play in the media playback pane.
The media playback pane automatically scales to the size of the playing media. If no HTML page displays in the related info pane as media plays, the media playback pane appears centered above the media browser pane as shown in the following figure. The media browser pane's resize handle allows the viewer to adjust the relative heights of the top and bottom halves of the three-pane environment.
 |
Tip: As explained in "Making Room for the Related Info Pane", you can use SMIL to display the media playback pane at the left side of the RealOne Player window instead of in the center. |
If the viewer has detached or closed the media browser pane, the media playback pane encloses the playing media, as illustrated in the next figure. This gives the viewer access to media in a smaller pane that includes just the necessary controls for adjusting media playback.
If a media presentation opens an HTML page in the related info pane, the media playback pane automatically expands to display both the media and the HTML page, as shown in the next figure.
When playing audio-only clips, the viewer can display in the media playback pane a visualization, such as an audio analyzer consisting of bars that rise and fall in response to the strength of various audio frequencies.
Content authors and viewers can also play media at double-size or full-screen. In full-screen mode, the media playback pane expands to fill the entire computer screen. In this case, no HTML pages in the related info or media browser panes display until the presentation ends, or the viewer exits full- screen mode.
The related info pane, which is also called the "context pane," appears to the right of the media playback pane. It's designed to display small HTML pages that supplement media clips. These pages might contain album cover art, copyright information, advertisements, and so on. Although using the related info pane is not required, displaying supplemental HTML pages in this pane greatly enhances the viewing experience. The related info pane can display any HTML page content supported by Microsoft Internet Explorer version 4 or later.
Because the media playback and related info panes are separate, you can easily open multiple HTML pages as a presentation plays, displaying each page at a specific point in the media timeline. You can thereby update the related info pane simply by opening a new HTML page. In contast, when you embed media in a Web page, updating the page as the media plays can require complicated scripting. RealOne Player thereby lets you focus on your media, and display any number of supplemental HTML pages by using simple production techniques.
 |
Note: Because no divider marks the boundary between the media playback and related info panes, it's easy to blend the panes by setting the same background colors. For the related info pane, you set the background color in the HTML page. Later sections in this guide explain how to set the media playback pane's background color through various methods. |
The RealOne Player production techniques described in this guide let you set the size of the related info pane. If you do not specify a size, the pane uses a default width of 330 pixels, and a height the same as the media playing in the media playback pane. If the page content is too large for the specified size, the pane displays scroll bars the same as a standard browser window.
The related info pane's size is fixed for the presentation's duration. As a clip or SMIL presentation plays, the first URL that opens in the related info pane sets the pane size. If a subsequent URL opens in the related info pane while the same clip or presentation plays, any sizing information in that URL is ignored. You can specify a new related info pane size, though, when starting a new clip or SMIL presentation.
You can set the related info pane to a height greater than the media, but not smaller. If your media is 300 pixels high, for example, your related info pane will be 300 pixels high even if you specify a shorter height, such as 200 pixels. However, you can create a related info pane that is taller than your media, such as 400 pixels. In this case, RealOne Player centers the media playback pane vertically alongside the related info pane.
When the bottom media browser pane is attached to the top two panes, it may increase the width of the related info pane. Suppose that you play a media clip that is 200 pixels wide, and you specify a related info pane width of 300 pixels. If the media browser pane is not attached, the width of the top two panes is 500 pixels. If a 600-pixel-wide media browser pane is attached, though, RealOne Player adds 100 pixels to the related info pane width to increase the overall width of the top panes to 600 pixels.
RealOne Player caches the HTML pages that display in the related info pane for the duration of a presentation. It deletes this cache when a new clip plays. RealOne Player does not normally cache media clips that play in the media playback pane. However, when you use SMIL, you can make RealOne Player cache small clips, such as images, that display in the media playback pane.
 |
For More Information: See the clip source tag chapter in RealNetworks Production Guide for more information about RealOne Player's CHTTP caching protocol for small media clips. |
The media browser pane can attach to, or detach from, the media playback and related info panes. When attached, it appears below the two other panes. Detached, it appears as a stand-alone window that the viewer can resize and close independently of the media playback and related info panes. Sending an HTML page URL to a closed media browser pane reopens the pane, however.
Through the media browser pane, RealOne Player users can surf the Web, play CDs, access their personal media libraries, transfer clips to portable players, and so on. Presentation authors can also use this pane to display Web pages associated with a streaming presentation. The pane can display any content supported in Microsoft Internet Explorer version 4 or later, including Javascript. You might use this pane to display your home page after a media presentation plays, for example.
In the left side of the media browser pane, viewers can display a clickable "Now Playing" list. When the viewer plays a streaming media clip or presentation, the clip or presentation title displays in this list. Additionally, the viewer can build a clip list by dragging media links from an HTML page displayed in the related info or media browser pane.
Like most Web browsers, RealOne Player can display any number of additional browsing windows, which are independent of the three-pane environment. You can display Web pages associated with your presentation in secondary browsing windows, for example. Displaying full Web pages in the media browser pane is preferable in most cases, though, because many viewers are likely to have that pane already attached to the media playback and related info panes. Additionally, only the media browser pane includes the "Now Playing" list.
You can use three different techniques to open URLs in an HTML pane as a media clip plays. These techniques allow you to create "media-driven" presentations, in which supplemental information displays in the HTML panes at a specific point in the media timeline, or in response to viewer interaction with clips. You can use these techniques to carry out tasks such as the following:
You typically launch media clips that play in RealOne Player with a Ram file,
which uses the extension .ram. As Chapter 3 explains, you can include in the
Ram file the URLs for HTML pages that open in the related info pane or
media browser pane. This Ram file method is easy to use, and is well-suited for
simple presentations, such as a single video clip that displays an HTML page
as it plays.
When you create a RealVideo or RealAudio clip with Helix Producer, you can write an events file that defines one or more URLs that open in a RealOne Player HTML pane at certain points as the clip plays. You then use a utility that embeds the events into the clip. Whenever you stream the clip, the encoded URLs open automatically. Chapter 4 provides more information about this production technique.
To lay out and synchronize multiple media clips, you use Synchronized Multimedia Integration Language (SMIL). A SMIL presentation always plays in the media playback pane, but it can also open HTML pages in the other panes. Using SMIL gives you more control over HTML display than using a Ram file, or encoding URLs directly into clips. Chapter 6 explains the basics of opening HTML pages with SMIL. Later chapters provide more information about using SMIL to coordinate multiple clips.
|
Tip: This guide covers only the basics of SMIL, which gives you full control over your media presentations. The section "What advanced SMIL features can I use?" lists some of the more complex SMIL features that you can learn about in RealNetworks Production Guide. |
Through HTML pages displaying in the related info pane or media browser pane, you can control the media displaying in the media playback pane, as well as open new HTML pages. These production techniques, which you can mix with the media-based techniques described previously, allow you to create "user-driven" presentations, in which clips and HTML pages display according to viewer action within the HTML panes.
The most basic way to link one HTML pane to another is through a simple
hypertext link in the form <a href>. You can open a new HTML page in the
media browser pane through a hypertext link in the related info pane by
adding a target="_rpbrowser" attribute to the <a href> tag:
<a href=" |
Any other target name will open the HTML page in a secondary window that is detached from the basic three-pane environment.
You should not attempt to open an HTML page in the related info pane with a simple link in the media browser pane, however, because the related info pane URL requires sizing information that you cannot pass in the link. However, the Javascript/VBScript methods described below let you pass this information.
If you link to a Ram file with a simple <a href> link as described in Chapter 3,
the clip or SMIL presentation listed in the Ram file automatically plays in the
media playback pane. You do not need to use any additional window targeting
attributes. To avoid a file download dialog, though, you can use the Javascript
or VBScript methods to play clips when the viewer clicks links.
RealOne Player supports several methods that work with both Javascript and
VBScript. Used in HTML pages displaying in the related info pane or media
browser pane, these methods give you more control than standard <a href>
links. They are intended for HTML pages displaying in the RealOne Player
environment, however, and not for HTML pages rendered by other browsers.
The Javascript/VBScript methods are well-suited for creating Internet-based audio and video jukeboxes, for example. Using these methods, you can create interactive presentations that add clips to the "Now Playing" list, for example, or play clips based on viewer interaction with forms or elements displayed in the related info or media browser pane.
Chapter 5 explains how to use the basic Javascript methods for creating a link in the related info or media browser pane that plays a clip or opens an HTML page. For information about all of the Javascript and VBScript methods, see RealOne Player Scripting Guide. Using these methods, you can populate the "Now Playing" list, preload URLs for later display, and more. The RealOne Player Scripting Guide also explains how to use Javascript and VBScript commands when embedding streaming media in a Web page.
The following sections compare the features of the four production methods discussed in this guide:
The following table compares the production methods for opening HTML pages in the related info and media browser panes as clips play.
| HTML Page Feature | Ram File | Events File | Javascript | SMIL 2.0 |
|---|---|---|---|---|
| Open a page in the related info pane? | yes (click here) |
yes (click here) |
yes (click here) |
yes (click here) |
| Open a related info page at any point during clip playback? | yes (click here) |
yes (click here) |
yes* | yes (click here) |
| Display multiple related info pages for a single clip? | no | yes (click here) |
yes* | yes (click here) |
| Set the related info pane size? | yes (click here) |
yes (click here) |
yes (click here) |
yes (click here) |
| Open a page in the media browser pane? | yes (click here) |
yes (click here) |
yes (click here) |
yes (click here) |
| Open a page in the media browser at any point during clip playback? | no | yes (click here) |
yes* | yes (click here) |
| Display multiple media browser pages for a single clip? | no | yes (click here) |
yes* | yes (click here) |
| Easily change the HTML page URLs? | yes | no | yes | yes |
| HTML URLs open in viewer's default browser with RealPlayer 8 and earlier? | no | yes | no | no |
* The Javascript methods themselves allow you to open two HTML pages, one in the media browser pane and one in the related info pane, when a clip starts. If you are handy with Javascript, though, you can use these methods within a larger scripting context to open multiple pages for each clip, or open HTML URLs at different points in the presentation, by calling the methods at different times. For more information, see RealOne Player Scripting Guide.
The next table compares the production techniques for managing media clips. Note that the different techniques are not mutually exclusive. For example, only a Ram file can open a presentation in double-size mode. However, you can use this feature with SMIL presentations, or when playing a clip that also has an encoded events file.
| Media Clip Feature | Ram File | Events File | Javascript | SMIL 2.0 |
|---|---|---|---|---|
| Play only a portion of a clip? | yes (click here) |
no | no | yes (click here) |
| Play clips in sequence? | yes (click here) |
no | yes* |
yes (click here) |
| Introduce each clip with a special effect? | no | no | no | yes (click here) |
| Play multiple clips at the same time? | no | no | no | yes (click here) |
| Provide basic title, author, and copyright information for each clip? | yes (click here) |
yes (click here) |
no | yes (click here) |
| Provide extended clip information, such as genre and album name? | yes (click here) |
yes (click here) |
yes (click here) |
no |
| Set the media playback pane's background color? | yes (click here) |
no | yes (click here) |
yes (click here) |
| Open a presentation in double-size, full-screen, toolbar, or theater mode? | yes (click here) |
no | no | no |
| Use with clips other than RealAudio and RealVideo? | yes | no | yes | yes |
* See RealOne Player Scripting Guide for details about the AddToNowPlaying method, which allows you to add clips to the "Now Playing" list.
RealOne Player's three-pane environment allows you to develop many different types of presentations that play media alone, or combine streaming media with HTML pages. The many production techniques that RealOne Player supports let anyone, beginner to expert, create simple to highly complex presentations. Here's how to get started:
|
©2002 RealNetworks, Inc. All rights reserved.
For more information, visit RealNetworks Click here if the Table of Contents frame is not visible at the left side of your screen. |
