Embeddable Media Playback with "WPF/E" (Code Name)

WPF/E Technical Articles

Laurence Moroney
Microsoft Corporation

January 2007

Applies to:
"WPF/E" (code name)
Microsoft Visual Studio 2005

Summary: One of the really neat things about "WPF/E" is that it isn't a closed development and run-time environment. The fact that you can implement your UI in XAML and control it from JavaScript means that you can build services that deliver a "WPF/E" front end. In this article, 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. (8 printed pages)

Introduction
Getting Started

Introduction

One of the really neat things about "WPF/E" is that it isn't a closed development and run-time environment. The fact that you can implement your UI in XAML and control it from JavaScript means that you can build services that deliver a "WPF/E" 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.

If you aren't familiar with Microsoft development tools, you can use Visual Web Developer Express to implement this. This software is a free download from the Visual Web Developer site.

Getting Started

First off, you can create a new Web site using Visual Web Developer by selecting New Web Site in the File menu. You'll get the New Web Site dialog box. Fill out the dialog box by selecting ASP.NET Web Site, and call 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)

This will create a new Web site for you, with a page in it called Default.aspx. We'll edit that page in a moment; but first, add a couple of new directories to your Web site. To do this, you can select the project in Solution Explorer, right-click it, and from the context menu, select New Folder. Call the folder xaml, and repeat the procedure to create a new folder called js.

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

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

Next, you'll create your Media Player XAML. To do this, right-click on the XAML directory that you just created and select Add New Item. In the ensuing dialog box, select XML File and call it videoplayer.xaml, as shown in Figure 3.

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

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="javascript: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 "WPF/E" media element that will be used to render the video. XAML is the core technology that is used to define "WPF/E" user experiences. For more on XAML, check out the MSDN Library and the Windows Presentation Foundation (WPF). Note that not all XAML tags that are supported in the WPF object model are supported on "WPF/E."

Next, you will need the "WPF/E" loader script. This is available as part of the "WPF/E" SDK; you can also download it from here. Put this script (agHost.js) in the js folder that you created earlier.

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

<%@ Page Language="C#" AutoEventWireup="true"  
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<html >
<head>
    <title>Video Server Sample</title>

<script src="js/aghost.js" type='text/javascript'></script>
<script type="text/javascript">
function handleLoad() {   
   var WpfeBlock = document.getElementById("wpfeControl");
   var elMedia = WpfeBlock.findName("VidElement");
      elMedia.Width="<%
       if (Request.Params["width"] == null)
          Response.Write("425");
        else
           Response.Write(Request.Params["width"]);
    %>";
      elMedia.Height="<%
        if (Request.Params["height"] == null)
          Response.Write("350");
        else
          Response.Write(Request.Params["height"]);
    %>";
   elMedia.source = "<% Response.Write(Request.Params["src"]); %>";
      elMedia.play();
}
</script>
</head>

<body bgcolor="black">
    <div id='wpfeControlHost'>
      <script type='text/javascript'>
            new agHost("wpfeControlHost",
              "wpfeControl",
              // Pull the width from the request param, default to 425
              "<%
                if (Request.Params["width"] == null)
                  Response.Write("425");
                else
                  Response.Write(Request.Params["width"]);
               %>",
              // Pull the height from the request param, default to 350
              "<%
                if (Request.Params["height"] == null)
                  Response.Write("350");
                else
                  Response.Write(Request.Params["height"]);
               %>",
               // Rest of params are hard-coded for now
               "white",
               null,
               "xaml/videoplayer.xaml",
               "false",
               "90",
               null);
      </script>
    </div>
</body>
</html>

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; and height, which contains the desired height of the video element.

Let's look at this code. First, let's look at the code that declares the "WPF/E" control on the page.

      <script type='text/javascript'>
            new agHost("wpfeControlHost",
              "wpfeControl",
              // Pull the width from the request param, default to 425
              "<%
                if (Request.Params["width"] == null)
                  Response.Write("425");
                else
                  Response.Write(Request.Params["width"]);
               %>",
              // Pull the height from the request param, default to 350
              "<%
                if (Request.Params["height"] == null)
                  Response.Write("350");
                else
                  Response.Write(Request.Params["height"]);
               %>",
               // Rest of params are hard-coded for now
               "white",
               null,
               "xaml/videoplayer.xaml",
               "false",
               "90",
               null);
      </script>

This code implements a new instance of the agHost JavaScript control (defined in agHost.js); the list of parameters that it supports are listed in the SDK. You'll notice that some ASP code is used to read the parameters from the HTTP request and write out the width and height properties. The important parameters to remember are the second one (wpfeControl), which is the name that you will use to refer to the control in script, and the seventh one (xaml/videoplayer.xaml), which is used to define the XAML to load into the "WPF/E" control. So, bear these in mind as we look at the next part of this code that is important: the handleLoad() function.

If you look back at the earlier XAML file, you will see the Loaded="javascript: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 "WPF/E" component that JavaScript can recognize. It does this by using the standard JavaScript methodology to fish a reference to an element out of the HTML DOM. The "WPF/E" control was named wpfeControl, and this name is used. A reference to it is now controllable by using the WpfeBlock JavaScript var. Once you have this element, you can use the findName function 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).

var WpfeBlock = document.getElementById("wpfeControl");
var elMedia = WpfeBlock.findName("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.

elMedia.Width="<%
       if (Request.Params["width"] == null)
          Response.Write("425");
        else
           Response.Write(Request.Params["width"]);
    %>";
      elMedia.Height="<%
        if (Request.Params["height"] == null)
          Response.Write("350");
        else
          Response.Write(Request.Params["height"]);
    %>";
   elMedia.source = "<% Response.Write(Request.Params["src"]); %>";

Finally we just "play" the media, which starts the video running.
elMedia.play();

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

http://localhost:XXXX/VideoService/Default.aspx?src=
http://download.microsoft.com/download/d/e/2/de2bec9c-4ba1-406e-8029-
5c4767dca3eb/WPFE_Getting_Started_2MB_Ch9.wmv&height=200&width=200

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 get 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 get embedded video!

Contents

Introduction

Getting Started