Silverlight ve MediaElement kullanımı.

0 dakikada yazıldı

7124 defa okundu

Düzenle

Silverlight uygulamalarında videonun yeri çok önemli, tarayıcı ve
platform bağımsız olarak istemci tarafında klasik WMV dosyalarını
oynatabiliyor olmak büyük avantaj sağlıyor. Tabi tüm bunları yapabilmek
için Silverlight içerisinde MediaElement nesneleri kullanmamız
gerekiyor. Bu yazıda MediaElement'in kullanımına ve bazı özelliklerine
göz atacağız.

<Canvas
xmlns
="http://schemas.microsoft.com/client/2007"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      Width="300"

      Height="300"

      Background="White"

      x:Name="Page">

  <MediaElement
Width
="300"

              Height="300"

              Canvas.Left="0"

              Canvas.Top="0" />

</Canvas>

Herhangi bir Silverlight uygulamasına yukarıdaki şekli ile bir
MediaElement yerleştirebilirsiniz. Klasik Silverlight nesnelerinde
olduğu gibi MediaElement'in de Width, Height ve Canvas.Left, Canvas.Top
özellikleri ile sahnedeki boyutu ve konumu belirlenebiliyor.

  <MediaElement
Width
="300"

              Height="300"

              Canvas.Left="0"

              Canvas.Top="0"

              Source="Lake.wmv"

              Volume="1"

              IsMuted="True" />

MediaElement'e herhangi bir video dosyası yüklemek için Source
özelliğini değiştirmek yeterli. Source özelliğine bir dosya adının
yanı sıra doğrudan MMS adresleri de aktarabilirsiniz. Ayrıca
MediaElement'in Volume özelliği ile sesi veya IsMuted Boolean
özelliği ile sesin açık olup olmayacağını da ayarlama şansınız var.

  <MediaElement
Width
="300"

              Height="300"

              Canvas.Left="0"

              Canvas.Top="0"

              Source="Lake.wmv"

              Stretch="Fill" />

Son olarak MediaElement'e ait Stretch özelliği ile video görselinin
MediaElement içerisine nasıl yerleştirileceğine de karar verebilirsiniz.
Bu özelliğe verebileceğiniz üç değeri aşağıdaki şekilde
tanımlayabiliriz.

Videoyu yönetmek...

Herhangi bir video dosyasını oynatırken onu durdurabiliyor olmak
önemlidir. Silverlight ile böyle bir işlevsellik sağlayabilmek için
kendi düğmelerimizi ve kodumuzu yazmamız gerekiyor. Bu nedenle aşağıdaki
şekliyle bir Silverlight uygulaması yaratalım ve sonrasında her bir
düğme için yazacağımız kodları incleyelim.

<Canvas
xmlns
="http://schemas.microsoft.com/client/2007"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      Width="300"

      Height="300"

      Background="White"

      x:Name="Page">

  <MediaElement
Width
="300"

              Height="300"

              Canvas.Left="0"

              Canvas.Top="0"

              Source="Lake.wmv"

              Stretch="Fill" />

              x:Name="Video" />

  <Canvas
Width
="73"

        Height="31"

        Canvas.Left="8"

        Canvas.Top="261"

        Opacity="0.7"

        MouseLeftButtonDown="Oynat">

    <Rectangle
Width
="73"

              Height="31"

              Fill="#FFFFFFFF"

              Stroke="#FF000000"

              RadiusX="16.5"

              RadiusY="16.5" />

    <TextBlock
Width
="47"

              Height="21"

              Canvas.Left="13"

              Canvas.Top="5"

              TextWrapping="Wrap"><Run
Text
="Oynat" /></TextBlock>

  </Canvas>

  <Canvas
Width
="73"

        Height="31"

        Canvas.Left="86"

        Canvas.Top="261"

        Opacity="0.7"

        MouseLeftButtonDown="Bekle">

    <Rectangle
Width
="73"

              Height="31"

              Fill="#FFFFFFFF"

              Stroke="#FF000000"

              RadiusX="16.5"

              RadiusY="16.5" />

    <TextBlock
Width
="47"

              Height="21"

              Canvas.Left="13"

              Canvas.Top="5"

              TextWrapping="Wrap"

              Text="Bekle" />

  </Canvas>

  <Canvas
Width
="73"

        Height="31"

        Canvas.Left="166"

        Canvas.Top="261"

        Opacity="0.7"

        MouseLeftButtonDown="Durdur">

    <Rectangle
Width
="73"

              Height="31"

              Fill="#FFFFFFFF"

              Stroke="#FF000000"

              RadiusX="16.5"

              RadiusY="16.5" />

    <TextBlock
Width
="47"

              Height="21"

              Canvas.Left="13"

              Canvas.Top="5"

              TextWrapping="Wrap"

              Text="Durdur" />

  </Canvas>

</Canvas>

Yukarıdaki XAML kodu ile tanımlanan Silverlight nesnesinde toplam üç
adet (Oynat, Bekle, Durdur) düğme yer alıyor. Her bir düğme farklı
JavaScript fonksiyonlarına bağlanmış durumda. Şimdi sıra geldi gerekli
JavaScript fonksiyonlarını yazmaya.

function Oynat(sender)

{

  sender.findName("Video").Play();

}

function Bekle(sender)

{

  sender.findName("Video").Pause();

}

function Durdur(sender)

{

  sender.findName("Video").Stop();

}

Her bir fonksiyonu çalıştıran düğmeye ait sender nesnesi üzerinden
findName metodunu çalıştırarak Video ismini vermiş olduğumuz
MediaElement'imizi bularak Play, Pause veya Stop metodları
ile video üzerinde gerekli işlemleri yapabiliyoruz.

Video'nun Buffer durumunu gösterme...

Video oynatılmadan önce yüklenirken önbellekleme durumunu algılayarak
kullanıcıya gösterebiliyor olmak da önemli bir işlevsellik
sağlayacaktır. Bu noktada kullanacağımız MediaElement'e ait durumun adı
BufferingProgressChanges olarak geçiyor.

  <MediaElement
Width
="300"

              Height="300"

              Canvas.Left="0"

              Canvas.Top="0"

              Source="Lake.wmv"

              Stretch="Fill"

              x:Name="Video"

             
BufferingProgressChanged
="Onbellek"
/>

Yukarıdaki şekli ile gerekli durumu ve çalıştırılacak olan Onbellek
JavaScript fonksiyonunu MediaElement içerisinde tanımladıktan sonra sıra
geldi gerekli JavaScript fonksiyonunu yazmaya.

function Onbellek(sender)

{

  sender.findName("Fon")["Opacity"]=sender.BufferingProgress;

}

Yukarıdaki fonksiyonda sender nesnesi bizim MediaElement'imizin ta
kendisi olduğu için rahatlıkla sender üzerinden yola çıkarak
MediaElement'in o anki önbellek durumunu BufferingProgress
özelliğinden alabiliyoruz. Önbellek durumu 1 ile 0 arasında decimal
olarak gönderileceği için aynı değeri doğrudan başka bir elementin
şeffaflığına aktararak yükleme süresince sürekli şeffaftan görünür hale
gelen bir animasyon yaratmış oluyoruz. Peki "fon" elementi de nedir?
Aşağıdaki şekliyle fonu siyah olan bir dikdörtgeni sahneye koyarsak
video yüklenirken söz konusu dikdörtgen giderek görünüz hale gelecek,
sonrasında da üzerinde video gözükecektir.

  <Rectangle
Width
="300"

            Height="300"

            Fill="#FF000000"

            Stroke="#FF000000"

            Canvas.Left="0"

            Canvas.Top="0"

            x:Name="Fon" />

Videoları maskeleme

Maskeleme işlemleri XAML kodlarında Clipping olarak geçer. O nedenle tüm
Silverlight nesnelerine olduğu gibi MediaElement'lere de Clip'ler
ayarlanabilir. Bunu için aşağıdaki gibi basit bir kod kullanabiliriz.

  <MediaElement
Width
="300"

              Height="300"

              Canvas.Left="0"

              Canvas.Top="0"

              Source="lake.wmv"

              Stretch="Fill"

              x:Name="Video"

             
BufferingProgressChanged
="Onbellek">

**   ** <MediaElement.Clip>

**     ** <EllipseGeometry RadiusX="50"

**                     **
RadiusY
="50"

**                     **
Center
="100,100"></EllipseGeometry>

**   ** </MediaElement.Clip>

  </MediaElement>

Gördüğünüz gibi MediaElement içerisinde ayrı bir EllipseGeometry
nesnesi Clip olarak tanımlanmış durumda. Bu şekilde kod
yazabileceğiniz gibi doğrudan Expression Blend içerisinde görsel
olarak da maskeleme yapma şansınız var. Blend içerisinde herhangi iki
nesneyi "Objects and Timeline" panelinden seçerek sağ tıkladığınızda
gelen menüden Path / Make Clipping Path komutu vermeniz halinde
seçili olan üstteki nesne bir alt nesneye Clip olarak ayarlanacaktır.
Aynı şekilde Clip ayarlanmış bir nesneye sağ tıkladığınızda gelen
menüden de Path / Release Clipping Path diyerek maskelemeyi kaldırma
şansınız da var.