Adding "Press Play" to a Silverlight Media Player
I just added an animated "Press Play" graphic to the Silverlight Media Player created with Expression Encoder. I created the graphic (with animation) as a separate XAML file so it can be easily reused. To see it in action, see this blog post. Feel free to use the PressPlay.xaml in your Silverlight media players; just link back to my blog.
Here's how to use it with a Silverlight media player created with Expression Encoder:
- Add a Loaded="PlayerLoaded" event handler to the root canvas
- Edit the StartPlayer.js file and change the autoPlay value to false. (search for "autoPlay")
- Name one of the Canvas elements in player.xaml "Scene"
- Add the attached PressPlay.xaml to the project files.
- Add this code to player.js:
function PlayerLoaded(sender, eventArgs)
{
var downloader = sender.getHost().createObject("Downloader");
downloader.addEventListener("Completed", PressPlayDownloaded);
downloader.Open("GET", "PressPlay.xaml");
downloader.send();
}
var m_pressPlay = null;
function PressPlayDownloaded(sender, eventArgs)
{
var host = sender.GetHost();
var xaml = sender.ResponseText;
var pressPlay = host.content.CreateFromXaml(xaml, true);
var scene = sender.findName("Scene");
pressPlay["Canvas.Left"] = scene.Width / 2 - pressPlay.Width / 2;
pressPlay["Canvas.Top"] = scene.Height / 2 - pressPlay.Height / 2;
pressPlay.IsHitTestVisible = false;
m_pressPlay = pressPlay;
scene.children.Add(pressPlay);
var media = sender.findName("VideoWindow");
media.addEventListener("CurrentStateChanged", MediaStateChanged);
}
function MediaStateChanged(sender, eventArgs)
{
if (sender.CurrentState == "Playing")
{
if (m_pressPlay)
{
m_pressPlay.GetParent().children.remove(m_pressPlay);
m_pressPlay = null;
}
}
}
