Smartwombat Blog

Embedding Silverlight

via Tim Sneath: How to Embed Silverlight Content in Almost Any Web Page

Simple video playback with Silverlight

The main feature of Silverlight that I am really excited about is the capability playing back videos. It does mean that we do not have to embed WMP controls on the HTML page anymore, but it will be possible to playback Windows Media Videos with Silverlight only, that means that Silverlight does not rely on WMP for video playback and it will be possible to playback Windows Media videos on other platforms as well. I have not tried this capability on the Mac yet, so I do not know how well the video playback works or does not work. But here is a quick way how to do this:

I am reusing the files from my Silverlight scratch project:

The first step is to get a video file and copy to folder, where the .html and .xaml file will be. Right now I am trying to play video only locally. Then you will need to create a new .xaml file (player.xaml), which looks like this:

<Canvas Width="800" Height="800" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Canvas x:Name="VideoLayer">
  <MediaElement x:Name="VideoElement" Canvas.Top="0" Canvas.Left="0" Stretch="Uniform" AutoPlay="True" Source="butterfly.wmv" />
  </Canvas>
 </Canvas>

In the .xaml snippet we have a Canvas and a MediaElement inside the Canvas. The source attribute is set to butterfly.wmv - this is the name of the video I copied to the same folder with the .html and .xaml files - and the autoplay property set to true, so it will start playing right away.

The next step is to modify the .html file, so it loads the right .xaml file (player.xaml) and change the size, so it can display the whole video.

So it will look like this:

 <script type="text/javascript">
  function createMySilverlightControl()
  { 
      Sys.Silverlight.createObject(
          "player.xaml",                  // Source property value.
          parentElement,                  // DOM reference to hosting DIV tag.
          "mySilverlightControl",         // Unique control ID value.
          {                               // Control properties.
              width:'720',                // Width of rectangular region of
                                          // control in pixels.
              height:'480',               // Height of rectangular region of
                                          // control in pixels.
              inplaceInstallPrompt:false, // Determines whether to display
                                          // in-place install prompt if
                                          // invalid version detected.
              background:'#D6D6D6',       // Background color of control.
              isWindowless:'false',       // Determines whether to display control
                                          // in Windowless mode.
              framerate:'24',             // MaxFrameRate property value.
              version:'0.9'               // Control version to use.
          },
          {
              onError:null,               // OnError property value --
                                          // event handler function name.
              onLoad:null                 // OnLoad property value --
                                          // event handler function name.
          },
          null);                          // Context value -- event handler function name.
  }
       
       
        // Retrieve the div element you created in the previous step.
        var parentElement =
            document.getElementById("mySilverlightControlHost");
       
        // This function creates the Silverlight control.
        createMySilverlightControl();
       
 </script>

Now the only thing is left to launch the html page and enjoy the video.

Quick sample for starting with Silverlight

This is my first try of using Silverlight and it is based on the Silverlight v1.0 Beta and the first of the Silverlight Quickstarts: lesson 01. My aim is to reuse this project and use it as a scratch project for my next articles.

You will need to install the Silverlight v1.0 Beta plugin on your computer.

There are going to be only 3 files in the same folder:

• An html files that will run in the browser called index.htm.
• A javascript  file which handles all the plumbing, Silverlight.js
• A xaml file called myxaml.xaml  containing the content will be displayed inside the silverlight.

My Xaml called myxaml.xaml file displaying the content looks like this:

<Canvas Width="800" Height="800" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Canvas x:Name="VideoLayer">
  <MediaElement x:Name="VideoElement" Canvas.Top="0" Canvas.Left="0" Stretch="Uniform" AutoPlay="True" Source="butterfly.wmv" />
  </Canvas>
 </Canvas>

You can play around with the xaml file and changing the different attributes of the ellipse, reload the html file to see the changes.

My HTML file (index.htm) looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>SilverLight - First Try</title>
    <script type="text/javascript" src="Silverlight.js"></script>
  </head>
  <body>
   <!-- Where the Silverlight control will go-->
 <div id="mySilverlightControlHost">
 </div>
 <script type="text/javascript">
  function createMySilverlightControl()
  { 
      Sys.Silverlight.createObject(
          "myxaml.xaml",                  // Source property value.
          parentElement,                  // DOM reference to hosting DIV tag.
          "mySilverlightControl",         // Unique control ID value.
          {                               // Control properties.
              width:'300',                // Width of rectangular region of
                                          // control in pixels.
              height:'300',               // Height of rectangular region of
                                          // control in pixels.
              inplaceInstallPrompt:false, // Determines whether to display
                                          // in-place install prompt if
                                          // invalid version detected.
              background:'#D6D6D6',       // Background color of control.
              isWindowless:'false',       // Determines whether to display control
                                          // in Windowless mode.
              framerate:'24',             // MaxFrameRate property value.
              version:'0.9'               // Control version to use.
          },
          {
              onError:null,               // OnError property value --
                                          // event handler function name.
              onLoad:null                 // OnLoad property value --
                                          // event handler function name.
          },
          null);                          // Context value -- event handler function name.
  }
       
       
        // Retrieve the div element you created in the previous step.
        var parentElement =
            document.getElementById("mySilverlightControlHost");
       
        // This function creates the Silverlight control.
        createMySilverlightControl();
       
 </script>
  </body>
</html>

Once you have these files in the same folder, then launch the index.htm and if everything works ok then you should see a nice big blue circle on the page displayed.