Laurence Moroney
Microsoft Corporation

Updated: July 2007

Applies to:

   Microsoft Silverlight
   Microsoft Visual Studio 2005

Summary: Learn how to use Silverlight to build a service that can embed video on a blog (or any other Web page), where all you need is an iFrame to the URL that contains your service. (6 printed pages)

Contents

Introduction
Getting Started

Introduction

One of the really neat things about Silverlight is that it isn't a closed development and runtime environment. Because you can implement your UI in XAML and control it from JavaScript, you can build services that deliver a Silverlight front end. In this example, I'll take you through the steps of building a service that can be used to embed video on a blog (or any other Web page), where all you need is an iFrame to the URL that contains your service.

Note   For this article, we will be using Visual Web Developer Express. This software is a free download from the Visual Web Developer site.

Getting Started

First off, you will create a new Web site using Visual Web Developer.

To create a new Web site

1. Open Visual Web Designer.
2. On the File menu, click New Web Site.
3. In the New Web Site dialog box that will then appear, select ASP.NET Web Site.
4. Name the Web site VideoService by typing that at the end of the location path, as shown in Figure 1.

Figure 1. Creating a new Web site in Visual Web Developer (Click on the picture for a larger image)

You will now have a new Web site containing a page called Default.aspx. We'll edit that page in a moment, but first add a couple of new directories to your Web site: "js," and "xaml."

To add two directories named "js" and "xaml" to Solution Explorer

1. Right-click the project in Solution Explorer, and click New Folder.
2. Name the folder xaml.
3. Repeat Steps 1 and 2 to create a new folder named js.

When you are done, Solution Explorer will look like Figure 2.

Figure 2. Your solution, with "js" and "xaml" directories added

Next, you will create your Media Player XAML.

To create a Media Player XAML

1. Right-click the XAML directory you just created and select Add New Item.
2. In the ensuing dialog box, select XML File.
3. Name the file videoplayer.xaml, as shown in Figure 3.

   

   Figure 3. Creating the XAML file (Click on the picture for a larger image)

4. Replace the contents of this file with the following XAML:

   <Canvas
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           x:Name="root"
           Loaded="handleLoad">
     <Canvas x:Name="VideoLayer">
       <MediaElement x:Name="VidElement" Canvas.Top="0"
           Canvas.Left="0" Height="100" Width="100">
       </MediaElement>
     </Canvas>
   </Canvas>

This creates a media element that will be used to render the video. XAML is the core technology that is used to define Silverlight user experiences. For more on XAML, browse the Windows Presentation Foundation (WPF) section of the MSDN Library.

Note   Not all XAML tags that are supported in the WPF object model are supported on Silverlight.

Now you will need the Silverlight loader scripts. The first of these, Silverlight.js, is available as part of the Silverlight SDK: http://www.silverlight.net. Put this script in the js folder you created earlier.

You will also need the createSilverlight.js script. This handles instantiation of Silverlight for this application. Create a new JavaScript file in the js folder, and name it createSilverlight.js.

Fill the createSilverlight.js with the following code:

This instantiates the Silverlight control when it is called, rendering the XAML stored in videoplayer.xaml that you created earlier. For the full set of properties check out the Silverlight documentation on http://www.silverlight.net.

For the final step, open the Default.aspx page and replace the code in it with this code.

This code implements a page (Default.aspx), to which you can pass three parameters:

• Src, which contains the URL of the video that you want to play back.
• Width, which contains the desired width of the video element.
• Height, which contains the desired height of the video element.

If you look back at the earlier XAML file, you will see the Loaded="handleLoad attribute. This specifies that when the XAML is loaded and rendered, the named JavaScript function (in this case, handleLoad) should be called.

So, what does handleLoad do? First of all, it creates a reference to the Silverlight component that JavaScript can recognize. It does this by pointing to the 'control' parameter that handleLoad receives using the slC JavaScript var. Once you have this element, you can use the findName function on its content to inspect its XAML and get a reference to an element within the XAML. We do this to get a reference to the MediaElement that we created in the XAML (and called VidElement).

Next, we just fish the parameters off the request line using some C#, and assign them to the Width, Height, and Source properties of the media element, respectively.

Now all you have to do is execute your application and pass it some parameters. As an example, you can do the following:

Where XXXX is a port that will be assigned by the built-in Web server at run time.

And when you run your page, you will have a video player! The magic of this is that you can deploy this to a Web server, and then, from your blog, you can <IFrame> into this URL to embed video!