Silverlight MediaElement ve JavaScript

XiLoNeN · 26-05-2008, 14:53

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.

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.

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.

HTML-Kodu:

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

HTML-Kodu:

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.

HTML-Kodu:

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.

Kaynak: [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

Silverlight MediaElement ve JavaScript

Silverlight, Expression, LinQ, Ajax, JavaScript