Export (0) Print
Expand All
3 out of 3 rated this helpful - Rate this topic

Walkthrough: Adding Video or Audio Media to a Web Application

[Note: This topic is pre-release documentation and is subject to change in future releases. Blank topics are included as placeholders.]

This walkthrough introduces the ASP.NET MediaPlayer server control, which enables you to add video and audio to a Web site. The walkthrough shows you how to perform the following tasks:

  • Add media (such as .wmv, .wma, and .mp3 files) and display a player that uses a media player skin.

  • Manage media playback by using JavaScript in the browser.

See a run-time code example of this feature: Run.

See a video that shows this feature: Watch.

In order to complete this walkthrough, you will need:

  • An ASP.NET Web site.

  • The .NET Framework version 3.5.

  • The Silverlight 3 Beta SDK.

  • Visual Studio 2008.

  • A media file (.wmv or .wma file).

To begin, you will create an ASP.NET Web site in Visual Studio.

To create a new ASP.NET Web Site in Visual Studio

  1. In the File menu, click New Web Site.

  2. In the New Web Site dialog box, select the ASP.NET Web Site template.

  3. In the Location list, select File System.

  4. Specify a name, path, and language for the application, and then click OK.

Next you will add and configure a MediaPlayer server control in the Web page and use it to reference the media file.

To add a MediaPlayer server control to the Web page

  1. In Solution Explorer, open or switch to the Default.aspx file.

  2. Switch to Design view.

  3. From the AJAX Extensions tab of the Toolbox, drag the ScriptManager control onto the page.

  4. From the Silverlight controls tab of the Toolbox, drag a MediaPlayer server control onto the page. Drop the control under the ScriptManager control.

  5. In the Properties window, set the MediaSkinSource() property to one of the predefined skins, such as "Professional".

  6. In the Properties window, make sure that the ID property is set to MediaPlayer1.

  7. In the Properties window, set the MediaSource() property to the location of the media file that you want to play.

  8. Set the Height and Width properties to values that will enable you to see the media file when it plays (such as 320 x 320).

  9. Set the ScaleMode() property to Stretch.

  10. Press CTRL+F5 to run the page.

    You can click the player to pause, stop, or play the media file. You can also double-click the player to play the media file in full-screen mode (press ESC to return the media player to regular mode).

    NoteNote:

    When you run the page, you might be prompted to install the Silverlight plug-in. If you are prompted, install Silverlight and try again.

  11. Close the browser.

This section describes how to play the media file automatically.

To play the media file automatically

  1. Open or switch to the Default.aspx file.

  2. Select the MediaPlayer control and in the Properties window, set the AutoPlay() property to true.

  3. Press CTRL+F5 to run the page.

    The media file plays automatically.

The next procedure describes how to play the media file in response to a user click.

To play the media file by using JavaScript

  1. Open or switch to the Default.aspx file.

  2. Switch to Design view.

  3. Select the MediaPlayer control and in the Properties window, set the AutoPlay() property to false.

  4. Switch to Source view.

  5. Add the following markup after the MediaPlayer control.

    <button id="play" 
        onclick="onPlay()" 
        type="button">
        Play
    </button> 
    
    

    This adds an HTML button with a JavaScript click event handler reference and an ID. Make sure that you also add the text "Play" between the opening and closing tags of the button markup.

  6. In the head element of the page, add the following script element to create the click handler.

    <script type="text/javascript">
    function onPlay()
    {
        $find('MediaPlayer1').play();
        $get('play').disabled = "disabled";
    }
    </script>
    
    

    This handler finds the player control in the browser and plays the media file. It also marks the HTML button as disabled.

  7. Press CTRL+F5 to run the page.

    Notice that the media file does not automatically play this time.

  8. Click the Play button to start to play the media file.

<%@ Page Language="C#"%>
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
    TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ASP.NET Controls for Silverlight</title>

    <script type="text/javascript">
    function onPlay()
    {
        $find('MediaPlayer1').play();
        $get('play').disabled = "disabled";
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
        </div>
        <asp:MediaPlayer ID="MediaPlayer1" runat="server" Height="320px" 
            MediaSource="../media/expressionstudio.wmv" 
            ScaleMode="Stretch" Width="320px" />
        <button id="play" 
            onclick="onPlay()" 
            type="button">
            Play
        </button>    
    </form>
</body>
</html>


Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft. All rights reserved.