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-плеер и перекодировать видео можно также в Microsoft Expression Encoder.
В результате на главную страницу будет добавлено Silverlight-приложение, позволяющее проигрывать видео (рис. 18.18).
Рис. 18.18. Отображение Silverlight-плеера на главной странице сайта
Такой способ позволяет нам отображать заранее заданное видео и имеет следующие преимущества перед обычным плеером:
возможность настройки дизайна плеера;
возможность создания playlist'ов;
возможность проигрывать различные форматы видео;
возможность навигации по видео, в том числе распознавать и переходить к заранее отмеченным на видео моментам.
Однако если мы захотим встроить в карточку продукта видеоплеер, который будет отображать видео, связанное с конкретным продуктом, этих возможностей нам не достаточно. Для того чтобы предоставить такую функциональность – разработаем Silverlight-приложение, аналогичное тому, что мы создали для Deep Zoom.