Chapter 1: RealPlayerCombining streaming media playback with digital downloads, RealPlayer 10 integrates the features found in previous versions of RealPlayer and RealJukebox, adding Web browsing as well. This chapter describes RealPlayer's three-pane environment, and introduces you to the powerful production techniques that you can use to create compelling streaming media presentations.
Note: Unless noted otherwise, all features described in this manual apply to RealOne Player through RealPlayer 10.
The Three-Pane Environment :
RealPlayer 10 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. RealPlayer 10 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 RealPlayer 10, 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 found in RealOne Player through RealPlayer 10. This environment 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.
Three-Pane Environment with a Secondary Browsing Window
The Media Playback Pane :
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 RealPlayer can display in this pane. This includes the core clip types and markup languages:
RealAudio® or MP3 for audio
RealVideo®, MPEG-1, or MPEG-4 for video
RealText® for timed text
RealPix™ for still-image slideshows
Macromedia Flash for animation
SMIL for creating an integrated presentation from multiple clips
In addition, RealPlayer 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.
Media Playback Pane Sizing :
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.
Media Playback Pane Centered Above the Media Browser Pane
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 RealPlayer window instead of in the center.
Media Playback Pane Alone :
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.
Media Playback Pane Without the Media Browser Pane
Media Playback and Related Info Panes :
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.
Media Playback Pane With the Related Info Pane
Visualizations for Audio-Only Clips :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.
A Visualization in the Media Playback Pane
Double-Size and Full-Screen Modes :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 :
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. RealPlayer 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.
Related Info Pane Sizing :The RealPlayer 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.
Media Clips Set the Minimum Height :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, RealPlayer centers the media playback pane vertically alongside the related info pane.
Media Browser Pane Can Override the Width :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, RealPlayer adds 100 pixels to the related info pane width to increase the overall width of the top panes to 600 pixels.
HTML Page Caching :RealPlayer 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. RealPlayer does not normally cache media clips that play in the media playback pane. However, when you use SMIL, you can make RealPlayer 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 RealPlayer's CHTTP caching protocol for small media clips.
The Media Browser Pane :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, RealPlayer 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.
Now Playing List :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.
RealPlayer `Now Playing' List
Secondary Browsing Windows :
Like most Web browsers, RealPlayer 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.
Using Media Clips to Open HTML Pages :
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:
Display advertisements.
Show purchasing information while a clip or a series of clips plays.
Highlight video topics with informational bullet points.
Open up your home page automatically when a presentation ends.
Appending HTML URLs to Clip URLs in a Ram File :
You typically launch media clips that play in RealPlayer 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.
Embedding HTML URLs Into a Clip :
When you create a RealVideo or RealAudio clip with RealProducer, you can write an events file that defines one or more URLs that open in a RealPlayer 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.
Using SMIL to Coordinate Clips and HTML Pages :
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.
Controlling a Presentation Through HTML Pages :
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.
Linking One HTML Pane to the Other :
The most basic way to link one HTML pane to another is through a simple hypertext link in the form . 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 tag:
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.
launching a clip with an HTML page Link :
If you link to a Ram file with a simple
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.
Using Javascript and VBScript Methods :
RealPlayer 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 links. They are intended for HTML pages displaying in the RealPlayer 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 RealPlayer Scripting Guide. Using these methods, you can populate the "Now Playing" list, preload URLs for later display, and more. The RealPlayer Scripting Guide also explains how to use Javascript and VBScript commands when embedding streaming media in a Web page.
Comparing Production Techniques :
The following sections compare the features of the four production methods discussed in this guide:
Adding parameters to a Ram file (Chapter 3).
Encoding information in a clip with an events file (Chapter 4).
Using the RealPlayer Javascript methods (Chapter 5).
Writing a SMIL 2.0 file (Chapter 6 through Chapter 8).
Opening HTML Pages
The following table compares the production methods for opening HTML pages in the related info and media browser panes as clips play .
Getting Started with Production :
RealPlayer'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 RealPlayer supports let anyone, beginner to expert, create simple to highly complex presentations. Here's how to get started:
If you've never produced a streaming media clip before, start with "Chapter 2: Media Production". That chapter explains the types of media that you can produce, and introduces you to important streaming concepts.
If you want to create a simple presentation, "Chapter 3: The Ram File" may provide all the information you need. Using a Ram file, you can stream clips and open HTML pages in the related info and media browser panes. "Chapter 4: Clip-Encoded URLs" explains how to do most of the same tasks by encoding URLs directly into clips, which some authors prefer.
"Chapter 5: Javascript Commands" introduces you to the basic RealPlayer Javascript methods. Using Javascript is optional, but if you are familiar with this scripting language, you'll find powerful tools in the RealPlayer methods.
Once you grasp the basics of media production, you can use SMIL to spice up your presentations. SMIL lets you display multiple clips, use timing commands, and add special effects to presentations. "Chapter 6: SMIL Hyperlinks" introduces you to SMIL, and explains how to link to an HTML page from SMIL. Chapter 7 and Chapter 8 provide details about using SMIL in complex media presentations.
You can also explore the sample files included with this guide. To view all of the sample files, download the zipped HTML version of this guide as described in "How to Download This Guide to Your Computer", and choose Sample Files from the pull-down menu.
What you will learn from this book
1. Design Elements from Photos
