-
Thanks to a good mathematician that goes by the moniker of rambler.elf, I was able to fix the zooming problem with my Media Magnifying glass Silverlight sample . After adding his fix, the zooming worked perfectly. I made two additional enhancements...( Read More...
-
As you can see, I have been experimenting with posting video on my blog now that I have a HD Video Camera ( JVC GZ-HD7U ). I have been trying various encoding formats in Expression Encoder to get a good balance of bit-rate and quality. Here is my workflow:...(read more)
-
I'm having a blast with Popfly, Microsoft's Silverlight-based mash-up designers. I've created a block that uses AOL Video Search and made a simple page that shows the results of what it does. I fell as if I'm just scratching the surface of something really...(read more)
-
A customer of mine is creating a cool video sharing site with Silverlight and wanted to see some code for a simple buffering progress indicator to show the user that the video is loading. This is actually pretty easy with Silverlight so I thought that I'd show my solution. In the solution, I name the ScaleTransform of the green rectangle and as the buffering increases from 0 to 1, I increase the ScaleX from 0 to 1.
XAML:
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="640" Height="480"
Background="White"
x:Name="Page">
<MediaElement Source="http://www.charette.com/alexander/Hippo%20and%20Rhino.wmv" x:Name="Media" Width="640" Height="480"/>
<Canvas x:Name="Buffering" Width="150.4" Height="18.262" Canvas.Left="243.6" Canvas.Top="232.81">
<Rectangle Width="150.4" Height="19.063" Fill="#FFFFFFFF" Stroke="#FF000000" Canvas.Top="-0.001"/>
<Rectangle RenderTransformOrigin="0,0" Width="148" Height="16.933" Canvas.Left="1.25" Canvas.Top="1.073" Stroke="#FF4EBE05">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="BufferingProgress" ScaleX="0.5" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Rectangle.RenderTransform>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,0.228" StartPoint="0.5,0.939">
<GradientStop Color="#FF4EBE05" Offset="0.303"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Width="78.667" Height="17.862" Text="Loading...." TextWrapping="Wrap" Canvas.Left="36.933" Canvas.Top="0.667" FontFamily="Trebuchet MS"/>
</Canvas>
</Canvas>
JavaScript code:
VideoLoading.Page.prototype =
{
handleLoad: function(control, userContext, rootElement)
{
this.control = control;
HandleBuffering(rootElement);
}
}
function HandleBuffering(rootElement)
{
var media = rootElement.findName("Media");
media.addEventListener("bufferingProgressChanged", OnBufferProgressChanged);
}
function OnBufferProgressChanged(sender, eventArgs)
{
var progress = sender.findName("BufferingProgress");
progress.ScaleX = sender.bufferingProgress;
var buffering = sender.findName("Buffering");
if (sender.bufferingProgress == 1.0 || sender.bufferingProgress == 0.0)
{
buffering.Visibility = "Collapsed";
}
else
{
buffering.Visibility = "Visible";
}
}
