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:



Tuesday, February 12, 2008

Microsoft Silverlight Streaming Service Test

This is a test of Microsoft Silverlight Streaming -- a free service that provides 4GB online space for Silverlight application hosting. You will need Silverlight 1.1 or higher to see the content. Move mouse over the video to see the movie controls. Resources for this implementation: a video file from Windows Vista, Silverlight 1.1 SDK, Visual Studio Express (Visual Web Developer 2008 Express Edition), and a Microsoft Silverlight Streaming account.