Опубликован: 04.05.2010 | Уровень: для всех | Доступ: платный
Практическая работа 5:

Применение элементов RIA в Интернет-магазине

< Лекция 13 || Практическая работа 5: 1234 || Лекция 14 >

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).

Проигрывание видео-файла на главной странице сайта при помощи Windows Media Player

увеличить изображение
Рис. 18.16. Проигрывание видео-файла на главной странице сайта при помощи Windows Media Player

18.5.2. Использование Silverlight-плеера

Альтернативный вариант заключается в использовании Silverlight -плеера.

Проще всего добавить этот плеер через Expression Studio. Для этого необходимо из окна ToolBox перетащить на страницу элемент Silverlight Video. В появившемся диалоговом окне необходимо указать видео-файл, который надо отобразить, после чего откроется еще одно диалоговое окно, изображенное на рис. 18.17. Оно позволяет перекодировать видео в нужную кодировку, указать шаблон плеера, а также указать ряд параметров (например, нужно ли начинать проигрывать видео сразу после открытия страницы, включать ли по умолчанию звук и другие).

Добавление Silverlight-плеера на страницу в Microsoft Expression Web

увеличить изображение
Рис. 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 -плеер и перекодировать видео можно также в Microsoft Expression Encoder.

В результате на главную страницу будет добавлено Silverlight -приложение, позволяющее проигрывать видео (рис. 18.18).

Отображение Silverlight-плеера на главной странице сайта

увеличить изображение
Рис. 18.18. Отображение Silverlight-плеера на главной странице сайта

Такой способ позволяет нам отображать заранее заданное видео и имеет следующие преимущества перед обычным плеером:

  • возможность настройки дизайна плеера;
  • возможность создания 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-функция, которая также позволяет менять источник видео.

Примечание: код функции changeMedia располагается на странице products/default.aspx, в PlaceHolder 'е предназначенном для загрузки скриптов.

На рис. 18.19 отображается результирующая карточка продукта со встроенным Silverlight -приложением.

Карточка продукта со встроенным Silverlight-приложением

увеличить изображение
Рис. 18.19. Карточка продукта со встроенным Silverlight-приложением

18.6. Ключевые термины

Deep Zoom, Deep Zoom Composer, Microsoft Expression Web, Silverlight, Microsoft Visual Studio, Windows Media Player.

18.7. Краткие итоги

Данное практическое занятие рассматривает следующие темы:

  • Введение в технологию Silverlight ;
  • Описание технологии Deep Zoom ;
  • Работа с Deep Zoom Composer:
    • Импорт изображений в Deep Zoom Composer ;
    • Создание меню в Deep Zoom Composer ;
    • Экспорт из Deep Zoom Composer ;
    • Добавление внутренних ссылок и тегов в Deep Zoom Composer ;
  • Подключение Deep Zoom на страницу через Expression Web;
  • Интеграция Silverlight -приложения в Интернет-магазин через Microsoft Visual Studio 2008:
    • Разработка пользовательского компонента на основе MultiScaleImage;
    • Работа с изображениями;
    • Отображение;
    • Установка приложения Silverlight на страницу;
  • Интеграция видеопроигрывателя в Интернет-магазин;
    • Проигрывание видео-файла при помощи Windows Media Player ;
    • Добавление Silverlight -плеера на страницу в Microsoft Expression Web ;
    • Разработка Silverlight -плеера с динамическим контентом.
< Лекция 13 || Практическая работа 5: 1234 || Лекция 14 >
Зарина Каримова
Зарина Каримова
Казахстан, Алматы, Гимназия им. Ахмета Байтурсынова №139, 2008
Akiyev Begench
Akiyev Begench
Беларусь, Полоцк, полоцкий государственный университет