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:



2 comments:

Judah Himango said...

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

andy said...

Web casting, or broadcasting over the internet, is a media file (audio-video mostly) distributed over the internet using streaming media technology. Streaming implies media played as a continuous stream and received real time by the browser (end user). Streaming technology enables a single content source to be distributed to many simultaneous viewers. Streaming video bandwidth is typically calculated in gigabytes of data transferred. It is important to estimate how many viewers you can reach, for example in a live webcast, given your bandwidth constraints or conversely, if you are expecting a certain audience size, what bandwidth resources you need to deploy.

To estimate how many viewers you can reach during a webcast, consider some parlance:
One viewer: 1 click of a video player button at one location logged on
One viewer hour: 1 viewer connected for 1 hour
100 viewer hours: 100 viewers connected for 1 hour…

Typically webcasts will be offered at different bit rates or quality levels corresponding to different user’s internet connection speeds. Bit rate implies the rate at which bits (basic data units) are transferred. It denotes how much data is transmitted in a given amount of time. (bps / Kbps / Mbps…). Quality improves as more bits are used for each second of the playback. Video of 3000 Kbps will look better than one of say 1000Kbps. This is just like quality of a image is represented in resolution, for video (or audio) it is measured by the bit rate.