Wednesday, February 13, 2008

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:



1 comment:

Judah Gabriel Himango said...

An alternative route is to use Windows Live Writer blog tool and the Embed Silverlight plugin.