Работа с видео в SilverLight

Сегодня разговор пойдет о видео файлах и работе с ними. Silverlight имеет очень широкие возможности создания простых видео плееров, и интересных интерактивных эффектов с использованием видео. После появления Silverlight стало возможным отображать высококачественное потоковое видео, чем в то время не мог похвастаться Flash, но с приходом Flash 9 ситуация выровнялась. Но так ли это на самом деле давайте посмотрим.

И так приступим, к созданию простого приложения, которое будет отображать наше видео. Чтобы создать такое приложение вам необходимо использовать Blend Studio, а также необходимо, чтобы был установлен видео плеер Windows Media Player не ниже 10 версии, иначе Blend Studio не даст вам создавать видео (MediaElement будет выдавать соответствующее предупреждение), к сожалению, в данный момент MediaElement поддерживает только три видео формата wmv, asx, asf и два аудио mp3, wma. Думаю в будущем будет обеспечен более богатый набор видео форматов. Но пока Blend Studio при попытке использовать не соответствующий формат, и даже иногда с некоторыми файлами *.wmv вылетает с Exception – ом, думаю этот баг они тоже исправят в будущих версиях. Ну пока посмотрим как все это работает.

Создание простого видео

Для того, чтобы создать приложение с видео, необходимо добавить MediaElement – в его свойствах указать файл который вы хотите использовать, либо выбрать его из существующего проекта. К сожалению в Blend Studio в SilverLight 2 проектах не присутствует MediaElement, но его можно создать в ручную:

Код XAML:

<MediaElement Height=”100″ Width=”100″ Canvas.Left=”50″ Canvas.Top=”50″ />

Но визуально его не будет видно, хотя зная его координаты выделить его все таки получится, хотя в проектах версии 1, MediaElement – обозначается пересеченным по диоганали крестом прямоугольником и маленьким изображением видео камеры, не знаю причин, почему они сейчас это изменили.

На самом деле это не составляет проблемы, так как любой медиа файл добавленный в ваш проект автоматически будет виден на странице контролов (закладка Media), перетащив его на окно вашего приложения, вы получаете нормальный MediaElement, со всеми доступными свойствами. Также перетащим, любой медиа файл из вашего проекта на окно нашего приложения, и наш MediaElement, также автоматически создается. Аналогично можно перетащить его в Blend Studio с помощью мыши прямо из файловой системы вашего компьютера.

И так MediaElement создан:

Код XAML:

<MediaElement Height=”326″ x:Name=”lovemachine_wmv” Width=”500″ Canvas.Left=”38″ Canvas.Top=”243″ Source=”lovemachine.wmv” Stretch=”Fill”/>

Если мы не производим не каких действий, то видео файл автоматически запускается после запуска нашего приложения. Как мы видим – MediaElement позволяет, производить все возможные геометрические изменения, то есть задать любой размер нашего видео окна, поменять угол, и изображение все равно будет проигрываться, автоматически производя необходимые изменения, не правда ли это очень удобно и открывает огромные возможности.

Позиционирование видео

Теперь добавим еще несколько файлов, что будет, если мы запустим наше приложение? Да, ничего, все будет отлично проигрывается, то есть каждый отдельным потоком, и каждое видео и его звуковая дорожка, будут проигрываться одновременно с остальными.

Как вы видите, видео файлы накладываются друг на друга. Порядок их следования в коде определяет их порядок наложения, то есть если элемент идет последним в коде то будет выше всех остальных и так далее.

Код XAML:

<Canvas x:Name=”LayoutRoot” Background=”White” >
<MediaElement Height=”100″ Width=”100″ />
<MediaElement Height=”169.261″ x:Name=”itsyoudad_wmv” Width=”234.935″ Canvas.Left=”131.535″ Canvas.Top=”73.739″ Source=”itsyoudad.wmv” Stretch=”Fill” RenderTransformOrigin=”0.5,0.5″ AutoPlay=”True”>
<MediaElement.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle=”9.652″/>
<TranslateTransform/>
</TransformGroup>
</MediaElement.RenderTransform>
</MediaElement>
<MediaElement Height=”326″ x:Name=”lovemachine_wmv” Width=”500″ Canvas.Top=”159″ Source=”lovemachine.wmv” Stretch=”Fill” Canvas.Left=”65″/>
<MediaElement Height=”191″ x:Name=”uborka_wmv” Width=”194″ Canvas.Left=”25″ Canvas.Top=”100″ Source=”uborka.wmv” Stretch=”Fill”/>
</Canvas>

В данном случае выше всех будет MediaElement с файлом uborka.wmv.
Все это действует пока у элементов не задан z-index. У каждого контрола расположенного на Canvas-е есть свойства их абсолютного расположения на Canvas-е - Canvas.Left, Canvas.Top, Canvas.ZIndex. Canvas.ZIndex – указывает расположение объекта в третьем измерении, то есть порядок в каком они будут следовать.

Теперь изменив порядок мы можем добиться, того что независимо от следования контролов в коде XAML они у нас будут отображаться в нужно порядке. Обратите внимание, что контрол ”uborka_wmv” перешел на задний план.

Код XAML:

<Canvas x:Name=”LayoutRoot” Background=”White” >
<MediaElement Height=”100″ Width=”100″ Canvas.ZIndex=”100″ />
<MediaElement Height=”169.261″ x:Name=”itsyoudad_wmv” Width=”234.935″ Canvas.Left=”131.535″ Canvas.Top=”73.739″ Source=”itsyoudad.wmv” Stretch=”Fill” RenderTransformOrigin=”0.5,0.5″ AutoPlay=”True”>
<MediaElement.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle=”9.652″/>
<TranslateTransform/>
</TransformGroup>
</MediaElement.RenderTransform>
</MediaElement>
<MediaElement Canvas.ZIndex=”300″ Height=”326″ x:Name=”lovemachine_wmv” Width=”500″ Canvas.Top=”200″ Source=”lovemachine.wmv” Stretch=”Fill”/>
<MediaElement Canvas.ZIndex=”200″ Height=”191″ x:Name=”uborka_wmv” Width=”194″ Canvas.Left=”25″ Canvas.Top=”100″ Source=”uborka.wmv” Stretch=”Fill”/>
</Canvas>

Теперь вы умеете, создавать простейшие приложения с использованием видео, перемещая и трансформируя их можно добиться интересных эффектов, и теперь уже видно, что возможности SilverLight по работе с видео, поражает воображение, и превосходит по возможностям Flash.

В следующем уроке, я вам расскажу, как сделать ваше приложение супер интерактивным, используя, еще множество интересных эффектов с применением видео.

Popularity: 15% [?]