Sem GÖKSU - Kişisel Web Sitesi

Merhaba arkadaslar, bu makalemizde silverlight’in bize sunmus oldugu MediaElement kontrolünün ne ise yaradigini, nerelerde ve nasil kullanildigini inceliyor olacagiz. Media elementi, silverlight uygulamalarinda video oynatmak için kullanabilecegimiz bir kontroldür.

MediaElement kontrolü video oynatma uygulamaları geliştirebilmemiz için silverlight’in bize sunmuş olduğu bir kontrol. MediaElement kontrolü ile mp3 ve wmv dosyalarını oynatabiliyoruz. MediaElement kontrolünü incelediğimizde işimize çok yarayacak metotlar, özellikleri ve eventleri var. Şimdi bunları biraz inceleyelim.

Play()
Play metodu, MediaElementi Kontrolüne kaynak olarak belirtilen videonun oynatilmasını sağlar.
Pause()
Pause metodu, videonun duraklatılmasını sağlar.
Stop()
Stop metodu da videonun durdurulmasını sağlar.

AutoPlay
Bu özellik videonun otomatik olarak oynatılıp oynatılmayacağını belirler. True yada False değeri alır.
IsMuted
Bu özellik videonun sessiz modda olup olmadığını belirler. True yada False değeri alır.
Opacity
Videonun opazite(görünüm) oraninin ayarini belirleyen özelliktir. Double tipinde bir deger atanabilir.
Source
MediaElementinde oynatilacak videoyu belirtmemizi saglayan özellik. Uri tipinde deger atayabiliyoruz.
Stretch
Stretch özelligi videonun MediaElementine nasil yerlestirilecegini belirliyor. Üç özellik alabiliyor. Uniform, UniformToFill ve Fill.
Volume
Videonun ses oranini belirleyen özellik. Double tipinde deger atanabilir.

MediaOpened
MediaElementindeki video basladiginda tetiklenecek olan event(olay)’dir.
MediaEnded
MediaElementindeki video bittiginde tetiklenecek olan event(olay)’dir.
DownloadProgressChanged
MediaElementindeki videonun donwload edildikçe oluşan eventidir..
BufferingProgressChanged
Media elementindeki videonun buffer olma(önbelleklenme) yapıldıkça oluşacak olan eventidir.

MediaElementini biliyoruz, özelliklerini de biliyoruz. O zaman artik video oynaticimizi hazirlayabiliriz. Ilk olarak Visual Studio 2008’i açip bir silverlight Projesi baslatalim. (Ilk kez silverlight ile ilgili bir seyler yapiyorsak önce burayi okumanizi tavsiye ederim.)

Projemizi açtiktan sonra Blend aracina gidelim. Projemizi blende ile açmak için, page.xaml (default xaml sayfamizi degistirdiysek onun) üzerinde sag click yaparak Open in Expression Blend’e tiklayalim. Sayfamizda bulunan Grid’e 2 Row tanimlayalim. 1. Rowda videomuzu görüntüleyecegimiz media elementi yer alacak. 2. Rowda da 4 tane buton ve sesi degistirebilmemiz için slider kontrolü yer alacak, anlik bufferingi ve donwload miktarini da görebilmek için 2 tane textbox ekleyelim. Her kontrole yapacagi ise göre bir isim verelim. (Kontroller default olarak bir isim almiyor)

Videomuz için olusan XAML kodu asagidaki gibi oldu.

<UserControlx:Class="VideoKontrol.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006>
    <Gridx:Name="LayoutRoot" Background="White" MinWidth="400"MinHeight="300">
    <Grid.RowDefinitions>
            <RowDefinitionHeight="*"/>
            <RowDefinitionHeight="48"/>
    </Grid.RowDefinitions>// Grid’i ikiye böldüm. Üstteki row’da video elementi yer alacak. Alttaki rowda da videoyu yönetecegim tuslar yer alacak.
    <Button HorizontalAlignment="Left"Margin="8,13,0,13" Grid.Row="1"Content="Play" x:Name="btnPlay"/> // Videoyu oynatacak buton
    <Button HorizontalAlignment="Left"Margin="83,13,0,13" Content="Stop"Grid.Row="1"x:Name="btnStop"/> // Videoyu durduracak buton
      <ButtonHorizontalAlignment="Left"Margin="41,13,0,13"Content="Pause"Grid.Row="1" x:Name="btnPause"/> // Videoyu duraklatacak olan buton
           <Slider Margin="125,15,170,15"Grid.Row="1"Maximum="1"Value="1"  x:Name="sldSes"/> // Videonun sesini ayarlayacak olan slider kontrolü
     <MediaElement Height="Auto"Grid.Row="0"HorizontalAlignment="Left"VerticalAlignment="Top" Width="Auto" Volume="1" x:Name="video"/> // Videomuzu gösterecek olan media kontrolü.
    <Button HorizontalAlignment="Left"Margin="319,11,0,15"Grid.Row="1"Content="Full ekran"Width="75" x:Name="btnFull"/> // Uygulamayi full ekran’da göstermek için kullanacagimiz buton.
     <TextBox HorizontalAlignment="Right " Margin="0,12,88,9" Width="33" Grid.Row="1" Text="" TextWrapping="Wrap" x:Name="txtBuffer"/>  // Bufering degerini gösterecek textbox
     <TextBox HorizontalAlignment="Right" Margin="0,12,126,9" x:Name="txtDownload" Width="33" Text="" TextWrapping="Wrap" Grid.Row="1"/> // Download oranini gösterecek olan textbox
</Grid>
</UserControl>

Video oynatici için tasarimi bitirdikten sonra artik video oynatici üzerindeki kontrollerin çalismasini saglayacak kodlari yazalim. Bunun için visual studio 2008’e geçelim ve page.xaml.cs kod dosyasini açalim. Burada default olarak olusan bir event yok. Bunun için ilk olarak uygulama yüklendiginde çalisacak olan event’i olusturalim (Loaded eventi). Bu event içinde de media kontrolünde gösterilecek olan video dosyasini belirtelim.

public Page()
{
   InitializeComponent();
   this.Loaded += new RoutedEventHandler(Page_Loaded);
}

void Page_Loaded(object sender, RoutedEventArgs e)
{
   video.Source = new Uri("http://www.semgoksu.com/images/video.wmv"); // Oynatilacak olan videonun pathi.
}

Ayni sekilde diger kontroller içinde eventleri olusturalim.

public Page()
{
    InitializeComponent();
    this.Loaded += new RoutedEventHandler(Page_Loaded);
    btnPlay.Click += new RoutedEventHandler(btnPlay_Click);
    btnPause.Click += new RoutedEventHandler(btnPause_Click);
    btnStop.Click += new RoutedEventHandler(btnStop_Click);
    btnFull.Click += new RoutedEventHandler(btnFull_Click);
    sldSes.ValueChanged += new RoutedPropertyChangedEventHandler<double>(sldSes_ValueChanged);
    video.BufferingProgressChanged += new RoutedEventHandler(video_BufferingProgressChanged);
    video.DownloadProgressChanged += new RoutedEventHandler(video_DownloadProgressChanged);
}

void video_DownloadProgressChanged(object sender, RoutedEventArgs e)
{
txtDownload.Text = (video.DownloadProgress * 100).ToString(); // Download oranini yüzde cinsinden gösterebilmek için media elementinin DonwloadProgress özelligini 100 ile çarptim. Download Progress o anki download oranini veriyor.
}

void video_BufferingProgressChanged(object sender, RoutedEventArgs e)
{
txtBuffer.Text = (video.BufferingProgress * 100).ToString();// Buffer (Önbellekleme) oranini yüzde cinsinden gösterebilmek için media elementinin BufferingProgress özelligini 100 ile çarptim. BufferingProgress özelligi o anki önbellekleme oranini gösteriyor.
}

void sldSes_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
video.Volume = sldSes.Value; // Sliderin degerine göre ses ayari da degisir.

}

void btnFull_Click(object sender, RoutedEventArgs e)
{
Application.Current.Host.Content.IsFullScreen = true; // Uygulamamizi tam ekran moduna getirir.
}

void btnStop_Click(object sender, RoutedEventArgs e)
{
video.Stop(); // Videoyu durdurur.
}

void btnPause_Click(object sender, RoutedEventArgs e)
{
video.Pause(); // Videoyu duraklatir.
}

void btnPlay_Click(object sender, RoutedEventArgs e)
{
video.Play(); // Videoyu oynatir.
}

Video oynaticimiz hazir. Test edelim,

Blog

Silverlight ile Web Servislerinin Kullanılması

.NET Framework Üye Sayiları

Silverlight XAP Dosyasi IIS Mime Type Ayarı

Silverlight MediaElement Kontrolü