Using the Media Bar in Internet Explorer

  • Article

This topic documents a feature that is obsolete as of Windows Internet Explorer 7.

Obsolete. New in Microsoft Internet Explorer 6, the Media Bar provides a straightforward UI for locating and playing media within the browser window. The Media Bar includes an HTML content area and a player control—essentially a smaller implementation of the Microsoft Windows Media Player—that enables the user to play music, video, or mixed-media files, search for additional media content, and display HTML in the bar without opening a separate window. The mediaBar behavior exposes much of the Media Bar functionality to script.

Note  As of Internet Explorer 6 on Windows XP Service Pack 2 (SP2) or Internet Explorer 7, the mediaBar feature is obsolete and no longer available.

You might be familiar with the Media Bar as it is used by MSN Music. In that scenario, the Media Bar displays dynamically updated album, playlist, and search information related to the media that is playing in the player control, without obscuring the user's view or diminishing the browsing experience. While the Media Bar clearly extends the browser's entertainment support, it also occupies a relatively small screen area, doesn't require an additional browser window, and frees the user from toggling between browsing and playback applications.

Developers are likely to implement the Media Bar to play music accompanied by playlist information or marketing content, to play educational or training media to accompany HTML in the browser window, and to enable users to navigate according to slideshow or video instruction while retaining view of that instruction.

  • Prerequisites 
  • Link to Media Files in the Main Window 
  • Target Media Content to the Media Bar 
  • Incorporate the Media Bar Behavior 
  • Basic Media Playback 
  • The Player Control 
  • Use and Display Player State Information 
  • Privacy 
  • Combine Media Playback with HTML+TIME Animations and Timelines 
    • Behind the Scenes: the Content Proxy Player 
    • Using HTML+TIME Timelines with Media Playback 
  • Related Topics

Prerequisites

The mediaBar behavior is available in Internet Explorer 6 on Windows 98 and later. To get the most benefit from this overview, you should have some knowledge of Microsoft JScript and Introduction to DHTML Behaviors in Internet Explorer. Ideally, you should be able to write basic script functions that call methods, read and set properties, and use the Dynamic HTML (DHTML) object model to access page elements.

It's quite straightforward to play media files linked from your page with the Media Bar player. If user preferences are set appropriately, and if the linked file is a recognized media format, Internet Explorer opens the Media Bar and begins playing the file. For a basic A element that links a media file, no TARGET attribute is required for playback in the Media Bar.

<A href="/workshop/samples/author/behaviors/media/56movie.asf">Shuttle Launch</A>

If the user has not previously set preferences or attempted to play media from within the browser window, the Media Bar Settings dialog box appears when the user first clicks a link to a media file. The user can then opt to play media files in Internet Explorer. Users who have already specified preferences or opened the Windows Media Player might need to reset their media preferences. To do so, they can first open the Media Bar by clicking the Media icon on the toolbar, or by choosing Explorer Bar from the View menu and selecting Media. When the Media Bar is visible, users can choose Settings from the Media Options menu on the Media Bar player control, and then select Reset preferred types.

When the Media Bar Settings dialog box appears, the user can choose to reset preferred media file types. The next time the user clicks a media link or plays a media file, the Media Bar Settings dialog box reappears, offering the option of playing media files in Internet Explorer.

Developers might want to ensure that media content does not play in the Media Bar, regardless of user media preference settings. For example, you might prefer that the user see a particular Windows Media Player skin with a particular media file. To prevent a linked media file from playing in the Media Bar, set the TARGET attribute of the A element to _blank, as in the following example.

<A href="/workshop/samples/author/behaviors/media/56movie.asf" target="_blank">Shuttle Launch</A>

The media file then opens either in Windows Media Player or an appropriate application, as specified by user preferences.

Target Media Content to the Media Bar

Web authors might want to include HTML content in the Media Bar for any number of reasons. The HTML content area allows you to:

  • Display information about currently playing and upcoming media. For example, you might display title, artist, and copyright information for the current and upcoming music file in an .asx playlist.
  • Display text or graphics that accompany a currently playing media file.
  • Provide links to other playable media files within the Media Bar content area.

In order to link HTML content that you want to appear in the Media Bar content area, set the TARGET attribute of the A element to _media. The A element then treats the Media Bar much as it would another frame. The following example shows how to target media content to the Media Bar.

<A href="/workshop/samples/author/behaviors/sample_content.htm" target="_media">Sample Link</A>

Incorporate the Media Bar Behavior

Because the Media Bar is accessible to script through an Internet Explorer default behavior, you must declare the behavior for the HTML you use in the Media Bar content area. For example, you might use an inline declaration on a DIV element that contains the content to be displayed in the Media Bar.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
</HEAD>
<BODY id="oBody">

<DIV style="behavior:url(#default#mediaBar)" id="divMedia"></DIV>

<DIV>
<IMG 
    alt="Image of a basketball player. Click to play a video of a basketball going into the 
    basket." 
    src="/workshop/graphics/behaviors/bball_player.gif"             
    onclick="divMedia.playURL(
    'https://msdn.microsoft.com/workshop/samples/author/behaviors/media/basketball.mpeg', 
    'video/mpeg');"/>
</DIV>
</BODY>
</HTML>

Alternatively, you might create a style class and associate your HTML content with the mediaBar behavior that way.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
    <STYLE>
    .mediabar{behavior:url(#default#mediaBar);}
    </STYLE>
</HEAD>
<BODY id="oBody">

<DIV class="mediabar" id="divMedia"></DIV>

<DIV>
<IMG 
    alt="Image of a basketball player. Click to play a video of a basketball going into the 
    basket." 
    src="/workshop/graphics/behaviors/bball_player.gif"             
    onclick="divMedia.playURL(
    'https://msdn.microsoft.com/workshop/samples/author/behaviors/media/basketball.mpeg', 
    'video/mpeg');"/>
</DIV>
</BODY>
</HTML>

For more information on associating elements with default behaviors, see Introduction to DHTML Behaviors.

Basic Media Playback

The Media Bar opens when the user chooses Explorer Bar from the View menu and selects Media, when the user clicks the Media icon on the toolbar, or when the user clicks a link to media in the browser window. The Media Bar includes space to display HTML, a player control with Play/Pause, Previous Track, Next Track and Stop buttons, a Seek bar, and Volume and Mute controls. The player itself has several menu options and can be "docked" and "undocked" in the Media Bar, enabling the user to position the player above or over the main browser window or return it to the Media Bar.

The mediaBar behavior exposes to script a number of events, methods and properties for controlling media playback and navigating through playlists. These members are only available in scripted content for which you've declared the behavior. In other words, they only work in the Media Bar.

The playURL method provides basic playback of a specified URL; the playNext method enables you to play successive items in a playlist. Be sure to specify a MIME type in calls to playURL: if the MIME type is NULL or none is specified, the player will not play the media file. You must also specify an absolute http, https, or ftp address for the media. The media player itself cannot serve as a reference point to a particular domain for uplevel or downlevel directories. Therefore, specify an absolute URL in calls to playURL, as in the following example.


<DIV style="behavior:url(#default#mediaBar)" id="divMedia" ></DIV>
<INPUT 
    type=button 
    onclick="divMedia.playURL(
    'https://msdn.microsoft.com/workshop/samples/author/behaviors/media/mediabar_1.asx',
    'video/x-ms-asf')" 
    value='Play the ASX file'/>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/mediabar/mbsample_display4.htm

When you play a media file in the Media Bar using a call to playURL, keep in mind that the user cannot replay the file using the Play button on the player control. This behavior supports licensing agreements with content providers. Once the media file is playing, the user can pause, play, skip, or use the status bar from the player control, provided that the control UI is enabled. However, the user cannot replay the file from the beginning without a programmatic call to playURL or playNext. If replay is important to your page design, take this into consideration by providing the user with a media link in the Media Bar content area or other programmatic access to replaying the media.

To stop playback programmatically, call the stop method on the appropriate object. However, it's important to consider a few things when using stop.

  • For security reasons, the mediaBar behavior unloads any active content in the Media Bar if stop is called twice during any ten-second period; the Media Bar then navigates to a default page.
  • The stop method is also called if you play new content from a link in the main page or use a scripted call to playURL in the Media Bar content area.
  • When the current instance of the mediaBar behavior is unloaded—on navigation, when loading new content, or on refresh—the media that is currently playing stops, and all content in the HTML content area is flushed. This protects user privacy by ensuring that a new site that is loaded in the browser window or Media Bar content area cannot capture information about previous media files played by the user.

Because these scenarios stop the currently playing media file or stream, authors who want to provide changing HTML and navigation in the Media Bar during playback should consider other means of doing so while persisting the current instance of the mediaBar behavior. For instance, framesets within the Media Bar content area function if the behavior is instantiated in a static frame inside the Media Bar. Another possibility for providing changing HTML and navigation during playback is the iframe object, which functions as a document within the document.

Security Alert  The Media Bar can load .asx and .asf files that specify multiple media URLs and scripted content. For security reasons, streamed content from unverified sources should be treated as user input. Developers should use caution when displaying content from unverified sources as HTML in the Media Bar content pane. For more information, see Security Considerations: Dynamic HTML and Security Considerations: DHTML and Default Behaviors.

The Player Control

The mediaBar behavior offers you some control, from script, over the player control UI. By setting the disabledUI property, it is possible to disable the Previous Track and Next Track buttons and the Seek bar. You can also make sure your page is notified of user actions by handling the onshow and onhide events, which fire when the user chooses to show or hide the Media Bar from the View menu, the toolbar, or the Close (X) button in the Media Bar itself. Note that playback is not affected by hiding the Media Bar: hiding does not unload the current instance of the behavior.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/mediabar/mbsample_display7.htm

Use and Display Player State Information

The Media Bar implements a subset of Windows Media Player events and properties. You can return information about the Media Bar player's activity and success when opening and playing media by handling the onopenstatechange and onplaystatechange events and reading the openState and playState properties. Both of these properties return integers that correspond to detailed information: the player's acquisition of codecs, contact with servers, loading of playlists, playback of streams, stop, pause, and scanning playback, and so on. You are likely to handle these events in script for a couple of reasons: to provide player state and media file information to the user, and to catch loading and playback errors or delays.

Only one instance of the behavior can receive event notification. However, if multiple instances are loaded, all instances can read the openState and playState properties and access playlist attributes if a playlist exists. If your content includes an event handler to update state or playlist information, and more than one instance of the behavior is loaded, the handler might not perform as expected. You are encouraged to avoid using multiple instances of the behavior.

The following example traps the onopenstatechange and onplaystatechange events and displays information for openState and playState. Note that openState and playState return integers, not strings. To make the state information meaningful, this example includes switch statements with the descriptions that correspond to openState and playState return values.


<HTML>
<HEAD>
<SCRIPT >
//Fill the display DIV with state information when called
function evtOnOpenState() {
    var openState;
    openState = divMedia.openState;
    openDiv.innerHTML = getOpenState(openState);
}

//Fill the display DIV with state information when called
function evtOnPlayState() {
    var playState;
    playState = divMedia.playState;
    playDiv.innerHTML = getPlayState(playState);
}

//Provide a meaningful description for the playState integer
function getPlayState(state) {
    var stateText;
    var stateText = "(" + state + "): ";
    switch (state) {
    case 0:  stateText += "The playback state is undefined."; break;             
    case 1:  stateText += "Playback is stopped."; break;          
    case 2:  stateText += "Playback is paused."; break;           
    case 3:  stateText += "The player is playing a stream."; break;            
    case 4:  stateText += "The player is scanning a stream forward."; break;     
    case 5:  stateText += "The player is scanning a stream in reverse."; break; 
    case 6:  stateText += "The player is buffering media."; break;     
    case 7:  stateText += "The player is waiting for streaming data."; break;    
    case 8:  stateText += "The player has reached the end of the media."; break;          
    case 9:  stateText += "The player is preparing new media."; break;           
    case 10: stateText += "The player is ready to begin playback."; break;    
    default: stateText += "No value"; break;
    }
    return stateText;
}

//Provide an meaningful description for the openState integer
function getOpenState(state)
{
    var stateText = "(" + state + "): ";
    switch (state) {
    case 0:  stateText += "Undefined"; break;                           
    case 1:  stateText += "The player is about to load a new playlist."; break;  
    case 2:  stateText += "The player is locating the playlist."; break;              
    case 3:  stateText += "The player is connecting to the server that holds a playlist."; break;  
    case 4:  stateText += "The player is loading a playlist."; break;                  
    case 5:  stateText += "The player is opening a playlist."; break;                
    case 6:  stateText += "The player's playlist is open."; break;                  
    case 7:  stateText += "The player's playlist has changed."; break;            
    case 8:  stateText += "The player is about to load new media."; break;    
    case 9:  stateText += "The player is locating the media file."; break;                  
    case 10: stateText += "The player is connecting to the server holding the media file."; 
    break;  
    case 11: stateText += "The player is loading a media file."; break;                       
    case 12: stateText += "The player is opening a media file."; break;                     
    case 13: stateText += "The media file is open."; break;                       
    case 14: stateText += "The player is starting codec acquisition."; break;          
    case 15: stateText += "The player is ending codec acquisition."; break;               
    case 16: stateText += "The player is starting license acquisition."; break;         
    case 17: stateText += "The player is ending license acquisition."; break;            
    case 18: stateText += "The player is starting individualization."; break;           
    case 19: stateText += "The player is ending individualization."; break;                
    case 20: stateText += "The player is waiting for media."; break;                    
    case 21: stateText += "The player is opening a URL whose type is not known."; break;  
    default: stateText += "No value"; break;
    }
    return stateText;
}
</SCRIPT>
</HEAD>
<BODY scroll="auto">
<INPUT type="button" onclick="divMedia.playURL(
'https://msdn.microsoft.com/workshop/samples/author/behaviors/media/mediabar_1.asx', 
'video/x-ms-asf');" value="PLAY SAMPLE ASX"/>

<DIV style="behavior:url(#default#mediaBar)" onplaystatechange="evtOnPlayState();"
onopenstatechange="evtOnOpenState();" id="divMedia">

<DIV>Open State:</DIV>
<DIV id="openDiv"></DIV>
<br>
<DIV>Play State:</DIV>
<DIV id="playDiv"></DIV>

</DIV>
</BODY>
</HTML>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/mediabar/mbsample_display5.htm

The mediaBar behavior also exposes methods and properties to allow scripts to obtain information about playlists. Call the getAttributeName and getItemInfo methods in combination to return the value of playlist item attributes. Likewise, your script can read the attributeCount, currentItem, hasNextItem, nextItem, playlistInfo, sourceURL, and name properties to determine the attributes of a particular media object or an item in a playlist. The following example uses the getAttributeName and getItemInfo methods in conjunction with the attributeCount and name properties to return information about the currently playing media item and to display that information in the Media Bar content area.


<HTML>
<HEAD>
<SCRIPT >

function showItemInfos(mediaItem)
{
        //Return the number of playlist attributes
        var itemsText = "'" + mediaItem.name + "' has " + mediaItem.attributeCount + 
                                  " attributes\n\n" + "<br/><br/>";
        //Loop through the attributes and return their values
        for (var i = 0; i < mediaItem.attributeCount; i++)
        {
            var attrName = mediaItem.getAttributeName(i);
            var attrVal  = mediaItem.getItemInfo(attrName);
            itemsText += attrName + " = " + attrVal + "\n" + "<br/>";
        }
        divMedia.innerHTML = itemsText;
}

</SCRIPT>
</HEAD>
<BODY scroll="auto">
<INPUT type="button" onclick="divMedia.playURL(
'https://msdn.microsoft.com/workshop/samples/author/behaviors/media/mediabar_1.asx', 
'video/x-ms-asf');" value="Play SAMPLE ASX"></INPUT>
<br><br>
<DIV style="behavior:url(#default#mediaBar)" 
OnPlayStateChange="showItemInfos(divMedia.currentItem);" id="divMedia"></DIV>
</BODY>
</HTML>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/mediabar/mbsample_display6.htm

In the preceding examples, error-handling code has been omitted to simplify the functions. However, you are encouraged to use standard error-handling practices when writing script functions that load and play media files. For example, implementing basic error handing allows you to specify alternative media if the designated media is unavailable or corrupt, or if streaming media is interrupted. The following example adds the JScript try and catch statements to the preceding code example in order to handle some possible errors, and adds a function to display error information.


<SCRIPT >
function evtOnPlayState() {
    var playState;
    try {
        playState = divMedia.playState;
    }
    catch(ex) {
        _showRTError(ex, "getPlayState(divMedia.playState)")
    }
    idPlayState.innerHTML = getPlayState(playState);
}

function evtOnOpenState() {
    var openState;
    try {
        openState = divMedia.openState;
    }
    catch(ex) {
        _showRTError(ex, "getOpenState(divMedia.openState)")
    }
    idOpenState.innerHTML = getOpenState(openState);
}

function getPlayState(state) {
    var stateText;
    var stateText = "(" + state + "): ";
    switch (state) {
    case 0:  stateText += "The playback state is undefined."; break;             
    .
    .  // More cases
    . 
    case 10: stateText += "The player is ready to begin playback."; break;    
    default: stateText += "No value"; break;
    }
    return stateText;
}

function getOpenState(state)
{
    var stateText = "(" + state + "): ";
    switch (state) {
    case 0:  stateText += "Undefined"; break;                           
    .
    . // More cases
    .
    case 21: stateText += "The player is opening a URL whose type is not known."; break;  
    default: stateText += "No value"; break;
    }
    return stateText;
}

function _showRTError(err, sContext)
{
    var   msg = "ERROR:\n" + sContext + "\n\n";
    msg = msg + err.description + "\n";
    msg = msg + "error number: " + (err.number) + "\n";
    alert(msg);
}
</SCRIPT>

Privacy

Instances of the Media Bar reflect the privacy settings determined by the user in Internet Explorer 6, including cookie control. Settings specified by the user for the browser window apply to HTML content and streams loaded into the Media Bar. In addition to these privacy features, the mediaBar behavior incorporates some inherent privacy protection, as described in Basic Media Playback. For more information about privacy support in Internet Explorer 6 and the W3C: Platform for Privacy Preferences (P3P) Project specification, see Privacy in Internet Explorer 6 and the Privacy Reference Documentation.

Combine Media Playback with HTML+TIME Animations and Timelines

Because the Media Bar plays and displays its content in a portion of the browser area, you may want to display dynamic, visually interesting HTML in the Media Bar content area in order to attract users' attention to changing media files, playlist information, and commercial content. To facilitate the display of dynamic content in the Media Bar content area, you can include the time2 behavior to provide lightweight timeline control, animation, and transitions for the users' Media Bar content. The Media Bar incorporates a proxy player that mirrors a small subset of state between HTML+TIME (Timed Interactive Multimedia Extensions) media playback functionality and the Media Bar player control. This proxy makes it possible to coordinate the definition of active time between the player control and an HTML+TIME timeline running in the Media Bar content area. In other words, your animation and media file can share some timeline properties and use the player control for start, stop, and status bar user interaction.

Behind the Scenes: the Content Proxy Player

The content proxy player reflects a small subset of the Media Bar player's state to the player implementation provided by the time2 behavior. In effect, the proxy mirrors the Media Bar player's definition of active time for the current media object to any active HTML+TIME timeline running in the Media Bar content area. (The activeTime property in HTML+TIME contains the time elapsed in the whole of an active timeline, including repeats and reverses; it is important to differentiate this from the segmentTime property, which contains the time elapsed in one iteration of an active timeline.)

Using HTML+TIME Timelines with Media Playback

In order to use HTML+TIME in markup displayed in the Media Bar content area, first instantiate the behavior for that markup, just as you did for the mediaBar behavior. For the time2 behavior, you also need to declare the XML namespace for the behavior. For more information about how to do this, see Incorporate the time2 Behavior.

To coordinate media playing in the Media Bar with an HTML+TIME timeline playing in the Media Bar content area, specify the class identifier of the Media Bar content proxy player in the PLAYER attribute of the t:MEDIA element in your timed HTML, as shown in the following example. The content proxy class identifier is {52ca3bcf-3b9b-419e-a3d6-5d28c0b0b50c}.

<t:MEDIA id="m1" src="/workshop/samples/author/behaviors/media/j0082200.mid"
        player="{52ca3bcf-3b9b-419e-a3d6-5d28c0b0b50c}" 
        syncMaster="true" syncBehavior="locked" begin="1"/>

To ensure that any timed or animated content displayed in the Media Bar content area matches your media playback, set the SYNCMASTER attribute on the t:MEDIA element that contains the source of the media file to play. Set the SYNCBEHAVIOR attribute on any timed elements that depend on the media playback. It's a good idea to use a container element, like t:PAR or t:SEQ, for all the synchronized elements.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML XMLNS:t ="urn:schemas-microsoft-com:time">
<HEAD>
    <STYLE>
    .time {behavior: url(#default#time2);}
    </STYLE>
    <?IMPORT namespace="t" implementation="#default#time2">
    <LINK REL="stylesheet" HREF="/workshop/samples/samples.css" TYPE="text/css">
</HEAD>
<BODY id="oBody">
<t:PAR syncBehavior="locked">
    <t:MEDIA id="m1" src="/workshop/samples/author/behaviors/media/j0082200.mid"                 
        player="{52ca3bcf-3b9b-419e-a3d6-5d28c0b0b50c}" 
        syncMaster="true" syncBehavior="locked" begin="1"  />
    <t:ANIMATEMOTION id="a1" begin="m1.begin" dur="9" targetElement="oDiv" 
        path="M 0 0 L 100 300" fill="freeze"/>
    <t:SEQ style="font-size:18pt;color:#ff0000" syncBehavior="locked" begin="m1.begin"                                                                                                                                               fill="freeze">
    <DIV class="time" dur="1.5">Add Some Text</DIV>
        <DIV class="time" dur="1.5">Or HTML</DIV>
            <DIV class="time" dur="2">To Accompany</DIV>
                <DIV class="time" dur="2">Media Playing in the Media Bar</DIV>
    </t:SEQ>
</t:PAR>
    <DIV id="oDiv" class="time" style="background-color:#FFCC00;position:absolute;
    height:40;width:120;top:70;left:10;font-size:18;border-style:solid" >
<SPAN id="iSpan">Falling DIV</SPAN></DIV>
</BODY>
</HTML>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/player_proxyGUID.htm

Just as with unaccompanied media files, users can control the currently playing media and HTML+TIME content with the player control UI if the interface is enabled. In other words, users can pause, continue, stop, and skip through the playing media and control it with the Seek bar. However, just as users cannot restart a media selection from the player control, they also cannot restart a synchronized HTML+TIME timeline or animation from the player control. If you want users to be able to replay a selection, make available some programmatic access to media file playback with a call to playURL or playNext—perhaps with a link to the media file in the Media Bar content area or browser window, a scripted button or other control, or another page element.

To see a combined sample that includes and extends the code examples from this overview, click the Show Me button. To ensure that the sample media files play in the Media Bar, reset your media preferences as previously described in the section entitled Link to Media Files in the Main Window.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/mediabar/mbsample_main1a.htm