Silverlight MediaElement ve JavaScript

0 dakikada yazıldı

7156 defa okundu

Düzenle

Silverlight 1.0 uygulamalarında Video yayınının gücünden daha önceki
yazılarımda bahsetmiştim. Gelin şimdi hep beraber sıfırdan bir
Silverlight Video Oynatıcı'sı hazırlayalım. Expression Blend 2
September Preview
yazılımını kullanacağımız bu demoda yeni bir
Silverlight (JavaScript) projesi yaratarak Page1.xaml üzerinde
çalışacağız. Dosyamıza bir adet MediaElement eklememiz gerekiyor,
bunun için Expression Blend 2 içerisinde sol araç çubuğundan Asset
Library
'ye girerek "MediaElement" yazarak kontroller arasında arama
yaptırmamız gerekiyor. Kontrol listesi içerisinde MediaElement'i
bulduktan sonra sayfaya ekleyebilirsiniz.

Asset Library içerisinden MediaElement'imizi buluyoruz.
Asset Library içerisinden MediaElement'imizi buluyoruz.

MediaElement'i sayfaya ekledikten sonra sıra geldi bir de video dosyası
eklemeye. MediaElement'e ait Source özelliğine Blend 2 içerisinden bir
video bağladığımızda video dosyasının bir kopyası projemize otomatik
olarak ekleniyor.

MediaElement'e ait Source özelliğine videomuzu gösteriyoruz.
MediaElement'e ait Source özelliğine videomuzu gösteriyoruz.

Bu işlemleri tamamladıktan sonra Silverlight uygulamamızı direk
çalıştırabiliriz. Video dosyamız MediaElement içerisinde oynatılıyor
olacaktır. Şimdi gelin videonun üzerine tıklandığında durmasını sonra da
tekrar tıklandığında devam etmesini sağlayalım. Bunun için
MediaElement'e ait MouseLeftButtonDown özelliğine bir JavaScript
fonksiyonu atamamız gerekiyor. Maalesef bunu şimdilik direk XAML kodu
içerisinde yapmamız gerekiyor, Expression Blend 2 içerisinde bu işlem
için bir arayüz yok. Benim tavsiyem Video projesini Blend 2 ile beraber
aynı anda Visual Studio ile de açmanız. Visual Studio içerisinde XAML
Intellisense desteğini de kullanarak daha rahat bir çalışma ortamı
yaratabilirsiniz. VideoTiklandi adinda bir JavaScript fonksiyonunu
aktardığımız MediaElement nesnemizi içeren XAML kodumuzun tamamı
aşağıdaki şekilde sonlanıyor.

<Canvas

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

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

  Width="400" Height="400"

  Background="White"

  x:Name="Page"

  >

  <MediaElement
Canvas.Left="8" Canvas.Top="8" Source="Bear.wmv"
MouseLeftButtonDown="VideoTiklandi"/>

</Canvas>

\

Sıra geldi JavaScript fonksiyonumuzun kendisini yazmaya.
Page.xaml.js adında Expression Blend 2 tarafından yaratılmış
JavaScript dosyasında bize örnek olması amacıyla bazı kodlar
yerleştirilmiş. İlk olarak bu kodları silerek Page.xaml.js'i aşağıdaki
hale getirmemiz gerekiyor.

if (!window.VideoYansima)

  window.VideoYansima = {};

 

VideoYansima.Page = function()

{

}

 

VideoYansima.Page.prototype =

{

  handleLoad: function(control,
userContext, rootElement)

  {

  }

}

\

Tüm bu kodların devamına VideoTiklandi JavaScript fonksiyonumuzu
tanımlayalım. Fonksiyonumuz video eğer oynatılıyorsa durduracak,
durdurulmuş durumdaysa tekrar devam ettirecek. Videonun var olan
durumunu saklamak üzere Oynuyor adında bir JavaScript değişkeni
kullanacağız.

var Oynuyor = true;

 

function VideoTiklandi (sender, args)

{

  if (Oynuyor)

  {

    sender.pause();

    Oynuyor = false;

  }

  else

  {

    sender.play();

    Oynuyor = true;

  };

}

\

Yukarıdaki kod içerisindeki standart JavaScript işlemlerinin yanı sıra
Silverlight ile ilişkili olarak dikkat etmemiz gereken noktalardan biri
MediaElement'imize sender JavaScript objesi üzerinden ulaşabiliyor
olmamız. Hali hazırda JavaScript fonksiyonumuzu MediaElement üzerinden
tetiklediğimiz için sender nesnesi de MediaElement'in ta kendisi
oluyor. MediaElement'in doğrudan play(), pause() ve stop()
metodlarını kullanarak videoyu durdurabilir, başlatabilir veya bulunduğu
yerden devam ettirebiliriz.

Basit bir Silverlight video oynatıcısı hazırladığımız bu örnekte
MediaElement'i ve JavaScript fonksiyonlarının Silverlight yapısındaki
yerini hızlıca inceledik. Bu yazımı takiben sonraki makalemde bu
örneğimize devam ederek MediaElement içerisindeki videonun
VideoBrush ile yansımasını almayı öğreneceğiz.

Hepinize kolay gelsin.