Embed Silverlight Streaming in Blogger

I tried to post a video hosted on Microsoft Silverlight Streaming service in the previous post. This post will show you how to embed Silverlight in a Blogger post.

1. Source code to embed the video in Blogger post. Notice, since Blogger tend to insert <br/> for new lines, the Javascript segment has to be on a single line:

<script type="text/javascript" src="http://agappdom.net/h/silverlight.js"></script>
<script type="text/javascript">function CreateSilverlight() { Silverlight.createHostedObjectEx( { source:"streaming:/[account ID]/MovieTest", parentElement:Wrapper_MovieTest}); } </script>
<div id="Wrapper_MovieTest" style="width: 640px; height: 480px;"></div>
<script type="text/javascript">var Wrapper_MovieTest = document.getElementById("Wrapper_MovieTest"); CreateSilverlight(); </script>

2. manifest.xml (required for Microsoft Silverlight Streaming upload)

<SilverlightApp>
<source>Movie.xaml</source>
<version>1.1</version>
<width>100%</width>
<height>100%</height>
<enableHtmlAccess>true</enableHtmlAccess>
<jsOrder>
  <js>Movie.xaml.js</js>
</jsOrder>
</SilverlightApp>

3.Movie.xaml (stage layout)

<Canvas x:Name="movieCanvas"
      xmlns="http://schemas.microsoft.com/client/2007"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Width="640" Height="480" Background="White" MouseEnter ="mouseEnter"
      MouseLeave ="mouseLeave">

<MediaElement x:Name="movie" Source="Lake.wmv"/>
<Canvas MouseLeftButtonDown="moviePlay"
  Canvas.Left="10" Canvas.Top="365">
  <TextBlock Canvas.Left="5" Canvas.Top="5" Visibility="Collapsed" x:Name="playButton" Foreground="White">Play</TextBlock>
</Canvas>
<Canvas MouseLeftButtonDown="moviePause"
  Canvas.Left="70" Canvas.Top="365">
  <TextBlock Canvas.Left="5" Canvas.Top="5" Visibility="Collapsed" x:Name="pauseButton" Foreground="White">Pause</TextBlock>
</Canvas>
<Canvas MouseLeftButtonDown="movieStop"
  Canvas.Left="130" Canvas.Top="365">
  <TextBlock Canvas.Left="5" Canvas.Top="5" Visibility="Collapsed" x:Name="stopButton" Foreground="White">Stop</TextBlock>
</Canvas>
</Canvas>

4. Movie.xaml.js (event handler, logic)

function movieStop(sender, args) {
  sender.findName("movie").stop();
}
function moviePause(sender, args) {
  sender.findName("movie").pause();
}
function moviePlay(sender, args) {
  sender.findName("movie").play();
}

function mouseEnter(sender, args) {
  setControlVisibility(sender, "Visible");
}

function mouseLeave(sender, args) {
  setControlVisibility(sender, "Collapsed");
}

function setControlVisibility(sender, visibility) {
  sender.findName("playButton").visibility = visibility;
  sender.findName("stopButton").visibility = visibility;
  sender.findName("pauseButton").visibility = visibility;
}

Files 2-4 and the movie are added to a zip file and uploaded to the Microsoft Silverlight Streaming host.

P.S.
You might also be interested in the following previous posts:

• If you like how the code snippets are formatted on this page, you might want to read my other post: Using SyntaxHighlighter on BLOGGER
  


• Embedding Chart in Web Pages Made Easy