18.5.3. Разработка Silverlight-плеера с динамическим контентом
Добавим в наше решение новый Silverlight проект SilverlightPleer и реализуем класс MainPage следующим образом:
<UserControl x:Class="SilverlightPleer.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Width="300" Height="200"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot" Margin="0,0,0,84">
<Grid.RowDefinitions>
<RowDefinition Height="0.715*"/>
<RowDefinition Height="0.285*"/>
</Grid.RowDefinitions>
<MediaElement x:Name="myMedia" Source="2.wmv" Width="300"
Margin="-2,0,2,-49" d:LayoutOverrides="VerticalAlignment"
Grid.RowSpan="2" AutoPlay="False"/>
<Button Width="94" Height="30" Content="Проиграть" Click="Button_Click"
Margin="-1,0,0,-83" VerticalAlignment="Bottom"
d:LayoutOverrides="VerticalAlignment, Height" RenderTransformOrigin="0.613,1.067"
Grid.Row="1" HorizontalAlignment="Left"/>
<Button Width="92" Height="30" Content="Остановить" Click="Button_Click_1"
HorizontalAlignment="Right" Margin="0,0,0,-83" VerticalAlignment="Bottom"
RenderTransformOrigin="0.613,1.067" Grid.Row="1"
d:LayoutOverrides="VerticalAlignment, Height"/>
<Button Height="30" Content="Пауза" Click="Button_Click_2"
Margin="105,0,103,-82" VerticalAlignment="Bottom"
RenderTransformOrigin="0.613,1.067" Grid.Row="1"
d:LayoutOverrides="VerticalAlignment, Height"/>
</Grid>
</UserControl>
Не будем подробно останавливаться на приведенном коде, отметим только, что на этой странице используется три кнопки и объект MediaElement, который предоставляет интерфейс для отображения различных видео-файлов. Видео-файл указывается в атрибуте Source и должен находиться в директории ClientBin.
Теперь необходимо реализовать логику плеера. Для этого в методе MainPage_Loaded зарегистрируем приложение на странице, чтобы позднее получить доступ к нему через JavaScript, реализуем метод changeMediaSource, который пометим атрибутом [ScriptableMember], что позволит вызывать этот метод из JavaScript. В реализации этого метода остановим проигрывание видео и изменим видео-файл на "3.wmv" (на самом деле необходимо хранить имя видео-файла для продуктов в БД). Также реализуем обработчики нажатия на кнопки "Проиграть", "Остановить" и "Пауза".
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
HtmlPage.RegisterScriptableObject("basic", this);
}
private void Button_Click(object sender, RoutedEventArgs e)
{
changeMediaSource();
}
[ScriptableMember]
public void changeMediaSource()
{
myMedia.Stop();
myMedia.Source = new Uri("3.wmv", UriKind.Relative);
myMedia.Play();
isStoped = false;
}
private void Button_Click_1(object sender, RoutedEventArgs e)
{
myMedia.Stop();
isStoped = true;
}
private void Button_Click_2(object sender, RoutedEventArgs e)
{
if (!isStoped)
{
myMedia.Pause();
isStoped = true;
}
else
{
myMedia.Play();
isStoped = false;
}
}
Теперь все готово к тому, чтобы разместить плеер на ASP-компоненте ProductControl. Для этого добавим следующий код:
<div id="silverlightControlHost" style='height:300px; width=200px;'>
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
width="100%" height="100%" id="silverlightControl">
<param name="source" value="../ClientBin/SilverlightPleer.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="3.0.40818.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0"
style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181"
alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object>
<iframe id="_sl_historyFrame"
style="visibility:hidden;height:0px;width:0px;border:0px">
</iframe>
</div>
<asp:Button ID="ButtonPlayJavaScript" runat="server"
Text="Изменить видео" OnClientClick="changeMedia();" />
<script language="javascript" type="text/javascript">
function changeMedia() {
var svlObject = document.getElementById("silverlightControl");
svlObject.Content.basic.changeMediaSource();
}
</script>
Как уже отмечалось, содержимое div'а стандартно для всех Silverlight-приложений. Помимо этого, добавляется новая Javascript-функция, которая также позволяет менять источник видео.
Примечание: код функции changeMedia располагается на странице products/default.aspx, в PlaceHolder'е предназначенном для загрузки скриптов.
На рис. 18.19 отображается результирующая карточка продукта со встроенным Silverlight-приложением.
Рис. 18.19. Карточка продукта со встроенным Silverlight-приложением