Walkthrough: Adding Video or Audio Media to a Web Application

In the File menu, click New Web Site.

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

In the Location list, select File System.

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

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

Switch to Design view.

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

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

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

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

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

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).

Set the ScaleMode property to Stretch.

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).

Close the browser.

Open or switch to the Default.aspx file.

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

Press CTRL+F5 to run the page.

The media file plays automatically.

Open or switch to the Default.aspx file.

Switch to Design view.

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

Switch to Source view.

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.

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.

Press CTRL+F5 to run the page.

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

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