Применение элементов RIA в Интернет-магазине
18.5. Способы подключения видео
Предположим, что мы хотим разместить на главной странице видеоролик, который будет проигрываться, когда пользователь зайдет на сайт. Это можно сделать несколькими способами.
18.5.1. Использование Windows Media Player
Самый простой способ отобразить видеоплеер на странице – воспользоваться Windows Media Player. Для этого на главную страницу достаточно добавить следующий код:
<object type="video/x-ms-wmv" width="200" height="200"> <param name="filename" value ="1.wmv" /> </object>
При этом файл " 1.wmv " должен находиться в корне сайта. Если теперь открыть главную страницу, то на ней сразу же начнется проигрывание видео (рис. 18.16).
увеличить изображение
Рис. 18.16. Проигрывание видео-файла на главной странице сайта при помощи Windows Media Player
18.5.2. Использование Silverlight-плеера
Альтернативный вариант заключается в использовании Silverlight -плеера.
Проще всего добавить этот плеер через Expression Studio. Для этого необходимо из окна ToolBox перетащить на страницу элемент Silverlight Video. В появившемся диалоговом окне необходимо указать видео-файл, который надо отобразить, после чего откроется еще одно диалоговое окно, изображенное на рис. 18.17. Оно позволяет перекодировать видео в нужную кодировку, указать шаблон плеера, а также указать ряд параметров (например, нужно ли начинать проигрывать видео сразу после открытия страницы, включать ли по умолчанию звук и другие).
увеличить изображение
Рис. 18.17. Добавление Silverlight-плеера на страницу в Microsoft Expression Web
После того, как разработчик укажет все необходимые данные и нажмет кнопку Encode, Expression Web перекодирует видео и добавит файл в проект, а также создаст Silverlight -приложение, поместив его по умолчанию в директорию silverlightvideos рядом с видео-файлом, и вставит на страницу следующий код:
<div id="silverlightvideocontainer">
<object data="data:application/x-silverlight-2" type="application/x-silverlight-2" width="640" height="352">
<param name="source" value="silverlightvideos/BlackGlassTemplate.xap"/>
<param name="background" value="white" />
<param name="minRuntimeVersion" value="3.0.40624.0" />
<param name="autoUpgrade" value="true" />
<param name="enableHtmlAccess" value="true" />
<param name="enableGPUAcceleration" value="true" />
<param name="initparams" value='playerSettings =
<Playlist>
<AutoLoad>false</AutoLoad>
<AutoPlay>false</AutoPlay>
<DisplayTimeCode>false</DisplayTimeCode>
<EnableCachedComposition>true</EnableCachedComposition>
<EnableCaptions>true</EnableCaptions>
<EnableOffline>true</EnableOffline>
<EnablePopOut>true</EnablePopOut>
<StartMuted>false</StartMuted>
<StretchMode>None</StretchMode>
<Items>
<PlaylistItem>
<AudioCodec>WmaProfessional</AudioCodec>
<Description></Description>
<FileSize>158516095</FileSize>
<FrameRate>23.9759856527702</FrameRate>
<Height>352</Height>
<IsAdaptiveStreaming>false</IsAdaptiveStreaming>
<MediaSource>silverlightvideos/2.wmv</MediaSource>
<ThumbSource></ThumbSource>
<Title></Title>
<VideoCodec>VC1</VideoCodec>
<Width>640</Width>
</PlaylistItem>
</Items>
</Playlist>'/>
<a href="http://go2.microsoft.com/fwlink/?LinkID=124807"
style="text-decoration: none;">
<img src="http://go2.microsoft.com/fwlink/?LinkId=108181"
alt="Get Microsoft Silverlight" style="border-style: none;"/>
</a>
</object>
<iframe id="_sl_historyFrame" style='visibility:hidden;height:0;width:0;border:0px;'>
</iframe>
</div>В результате на главную страницу будет добавлено Silverlight -приложение, позволяющее проигрывать видео (рис. 18.18).
Такой способ позволяет нам отображать заранее заданное видео и имеет следующие преимущества перед обычным плеером:
- возможность настройки дизайна плеера;
- возможность создания playlist 'ов;
- возможность проигрывать различные форматы видео;
- возможность навигации по видео, в том числе распознавать и переходить к заранее отмеченным на видео моментам.
Однако если мы захотим встроить в карточку продукта видеоплеер, который будет отображать видео, связанное с конкретным продуктом, этих возможностей нам не достаточно. Для того чтобы предоставить такую функциональность – разработаем Silverlight -приложение, аналогичное тому, что мы создали для Deep Zoom.
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-функция, которая также позволяет менять источник видео.
На рис. 18.19 отображается результирующая карточка продукта со встроенным Silverlight -приложением.
18.6. Ключевые термины
Deep Zoom, Deep Zoom Composer, Microsoft Expression Web, Silverlight, Microsoft Visual Studio, Windows Media Player.
18.7. Краткие итоги
Данное практическое занятие рассматривает следующие темы: