Controlling Media Playbacks
We can control the media playback by using Play, Pause, Stop methods of the MediaElement.
Here I have created four more canvas object inside the parent canvas object and kept a rectangle object into it. Again, I have adjusted the canvas property of the TextBlock to fill the rectangle object with Stop, Play, Pause and Full Screen text.
Now, I have specified javascript function to the MouseLeftButtonDown property of those four canvas objects to control the media.
Let me describe you each the method one by one.
Stop: When Stop button is clicked, StopMedia event is fired, in this method I am finding my media element and triggering the stop method to stop the media.
Play: When Play button is clicked, PlayMedia event is fired, in this method I am finding my media element and triggering the play method to play the media.
Pause: When Pause button is clicked, PauseMedia event is fired, in this method I am finding my media element and triggering the pause method to pause the media.
Full Screen: This is a little bit tricky. Actually when the parent canvas object is loaded, CanvasLoaded method is called, in this method I am finding my host object that is holding my media by using sender.getHost() and specifying its onfullScreenChanged to onFullScreenChanged method. This method will take care of the screen width and height at this time and also when you return to normal mode from full screen mode. As in both cases Loaded method of parent canvas object is called.
In onFullScreenChanged method I am finding the button panel and specifying the opacity to 0 (transparent) if my content is in full screen mode else I am specifying the opacity to 1. Also I am setting the width and height property of my canvas to the actual height and width of the canvas. ToggleFullScreen is called when Full Screen is clicked. In this method, I am just toggling the value of fullScreen the of the parent canvas.
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="CanvasLoaded">
<MediaElement x:Name="MyMedia" Stretch="Uniform"
Source="/images/Silverlight_Small.wmv" Height="200" Width="200" />
<Canvas x:Name="ButtonPanel">
<Canvas Background="Red" Canvas.Left="10" Canvas.Top="185" Height="25" Width="50"
MouseLeftButtonDown="StopMedia" Cursor="Hand">
<Rectangle Height="30" Width="40" Canvas.Left="10" />
<TextBlock Text="Stop" Canvas.Left="10" Foreground="Yellow" />
</Canvas>
<Canvas Background="Green" Canvas.Left="70" Canvas.Top="185" Height="25" Width="50"
MouseLeftButtonDown="PlayMedia" Cursor="Hand">
<Rectangle Height="30" Width="40" Canvas.Left="10" />
<TextBlock Text="Play" Canvas.Left="10" Foreground="Yellow" />
</Canvas>
<Canvas Background="Blue" Canvas.Left="130" Canvas.Top="185" Height="25" Width="60"
MouseLeftButtonDown="PauseMedia" Cursor="Hand">
<Rectangle Height="30" Width="40" Canvas.Left="10" />
<TextBlock Text="Pause" Canvas.Left="10" Foreground="Yellow" />
</Canvas>
<Canvas Background="Black" Canvas.Left="10" Canvas.Top="215" Height="25" Width="180"
MouseLeftButtonDown="ToggleFullScreen" Cursor="Hand">
<Rectangle Height="30" Width="40" Canvas.Left="10" />
<TextBlock Text="Full Screen" Canvas.Left="55" Foreground="Yellow" />
</Canvas>
</Canvas>
</Canvas>
// --------- JavaScript Code to control the Media object -------------
// Fires when Canvas is loaded
function CanvasLoaded(sender, args)
{
var canvas = sender.getHost();
canvas.content.onfullScreenChange = onFullScreenChanged;
}
// Fires when Full screen is changed
function onFullScreenChanged(sender, args)
{
var canvas = sender.getHost();
var buttonPanel = sender.findName("ButtonPanel");
// Change the opacity of the button panel so that in the full screen it disappears and in normal screen it appears
if (canvas.content.fullScreen == true)
buttonPanel.opacity = 0;
else
buttonPanel.opacity = 1;
// change the media object height and width to the canvas height and width
var media = sender.findName("MyMedia");
media.width = canvas.content.actualWidth;
media.height = canvas.content.actualHeight;
}
//Fires when Full Screen button is clicked
function ToggleFullScreen(sender, args)
{
var canvas = sender.getHost();
canvas.content.fullScreen = !canvas.content.fullScreen;
}
// Fires when Stop button is clicked
function StopMedia(sender, args)
{
sender.findName("MyMedia").stop();
}
// Fires when Play button is clicked
function PlayMedia(sender, args)
{
sender.findName("MyMedia").play();
}
// Fires when Pause button is clicked
function PauseMedia(sender, args)
{
sender.findName("MyMedia").pause();
}
|
|