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
