Makale
Bu makalede basit bir silverlight media player yapımından, yaptığımız media player ile video dosyalarının oynatılmasından ve anlık olarak video dosyasından resimler yakalamakla ilgili bilgiler paylaşıyor olacağım.
Veritabanının şişmesini engellemek için videoların adlarını tutmak daha mantıklıdır. Örneğin 200 mb lik bir videonun,veritabanında kaplayacağı yer ile videonun isminin veritabanında kaplayacağı yer aynı değildir. Bu nedenle, veritabanındaki video tablosunu aşağıdaki gibi düzenliyorum.
Veritabanı kısmını hallettikten sonra, yenibir web sitesi oluşturuyorum ve Default.aspx, Upload.aspx, Video.aspx sayfalarını siteye ekliyorum. Önce video upload işlemini yapabilmek için Upload.aspx sayfasını aşağıdaki gibi düzenliyorum.
Upload.aspx
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="fileUpVideo" runat="server" />
<br /><br />
<asp:Button ID="btnKaydet" runat="server" onclick="btnKaydet_Click" Text="Kaydet" />
<br /><br />
<asp:Label ID="lblSonuc" runat="server"></asp:Label>
</div>
</form>
</body>
Burada fileupload kontrolüyle seçilen video dosyasını Kaydet butonu aracılığıyla hem veritabanına kaydedeceğiz, hem de video dosyasını sunucuda ClientBin klasörü içine kopyalayacağız.
Upload.aspx.cs
protected void btnKaydet_Click(object sender, EventArgs e)
{
if(fileUpVideo.HasFile != false &&fileUpVideo.PostedFile != null)
{
SqlConnection cn = new SqlConnection("server = .; database = videoupload; IntegratedSecurity = true;");
SqlCommand cmd = new SqlCommand("insert into Video values (@Ad, @ResimUrl)",cn);
cmd.Parameters.AddWithValue("@Ad", fileUpVideo.FileName);
cmd.Parameters.AddWithValue("@ResimUrl", "videoicon.jpg ");
try
{
cn.Open();
cmd.ExecuteNonQuery();
lblSonuc.Text = string.Format("{0} adlı video başarıyla yüklenmiştir.", fileUpVideo.FileName);
}
catch (Exception ex)
{
lblSonuc.Text =ex.Message.ToString();
}
fileUpVideo.SaveAs(Server.MapPath("~/ClientBin/" fileUpVideo.FileName));
}
else
{
lblSonuc.Text = "Lütfen bir video dosyası seçiniz.";
}
}
Kaydet butonuna basıldığında, önce yüklenecek bir dosyanın olup olmadığının kontrolünü yapıyoruz; ardından ise Video tablosuna dosya adını ve videolar listelenirken görüntülenecek resimurl’sini kaydediyoruz ve dosyayı ClientBin klasörüne kopyalıyoruz. Şimdi videoların listeleneceği Default.aspx sayfasını düzenleyelim.
Default.aspx
<body>
<form id="form1" runat="server">
<a href="Upload.aspx">Yeni Video Yükle</a>
<br /><br />
<div>
<asp:DataList ID="dlVideolar" runat="server" RepeatDirection="Horizontal">
<ItemTemplate>
<h4><%# Eval("Ad") %></h4>
<img src='<%# Eval("ResimUrl").ToString() %>' alt='<%# Eval("Ad").ToString() %>' />
<br />
<a href='<%# "Video.aspx?id=" Eval("ID").ToString() %>'>Bu Videoyu İzle</a>
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
Default.aspx.cs
protected void Page_Load(objectsender, EventArgs e)
{
if(Page.IsPostBack)
{
return;
}
VideolariGetir();
}
private void VideolariGetir()
{
VideoLinqDataContext dc = new VideoLinqDataContext();
dlVideolar.DataSource = dc.Videos;
dlVideolar.DataBind();
}
Default.aspx sayfası yüklenirken veritabanından videoları alıyorum ve datalist ile listeliyorum. dlVideolar kontrolünün itemtemplate kısmına eklediğim html elemanlarına, videoların özelliklerini bağlıyorum.
Şimdi video oynatacağımız media playerimizi oluşturalım. Video.aspx sayfasında çalışmaya başlamadan önce silverlight ile video işlemleri konusunda küçük bilgilere değineceğim. Silverlight ile canlı veya kayıttan(banttan) video göstermemizi sağlayan kontrol MediaElement kontrolüdür. Bu kontrolün Source özelliğine verilen değeri işleyerek videoyu oynatır. Web sitemize yeni bir silverlight projesi ekliyorum ve MainPage.xaml dosyamı aşağıdaki gibi düzenliyorum. Bu silverlight projesi Video.aspx sayfasında host edilecek.
MainPage.xaml
<Grid x:Name="LayoutRoot"Background="White" MinWidth="400"MinHeight="300">
<Grid.RowDefinitions>
<RowDefinition Height="260"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<MediaElement x:Name="mePlayer"/>
<Rectangle Fill="Black"Grid.Row="1"/>
<StackPanel Grid.Row="1"Orientation="Horizontal" Margin="80,0">
<Button x:Name="btnPlay"Content="" Width="70"Height="22"/>
<Button x:Name="btnGrap"Content="Get Picture" Width="70"Height="22"/>
<TextBlock x:Name="txbPosition"Foreground="Black"/>
</StackPanel>
</Grid>
MainPage.xaml dosyamızın görevi seçilen videoyu oynatmak, durdurmak ve anlık olarak videodan resim yakalamaktır.Kodlamaya geçmeden önce belirtmek isterim ki, bu bölümde silverlight resmi forumundan faydalandım.
MainPage.xaml.cs
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
VideoYonetimSoapClient client = new VideoYonetimSoapClient();
int id = int.Parse(System.Windows.Browser.HtmlPage.Document.QueryString["id"].ToString());
client.VideoGetirAsync(id);
client.VideoGetirCompleted = new EventHandler<VideoGetirCompletedEventArgs>(client_VideoGetirCompleted);
}
void client_VideoGetirCompleted(object sender, VideoGetirCompletedEventArgs e)
{
string url = App.Current.Host.Source.ToString().Replace("AspnetVideo.Player.xap", "") e.Result.Ad;
mePlayer.Source = newUri(url);
mePlayer.Play();
btnPlay.Content = "Pause";
}
void btnGrap_Click(object sender, RoutedEventArgs e)
{
mePlayer.Pause();
txbPosition.Text = mePlayer.Position.ToString();
ResimCek();
}
private void ResimCek()
{
WriteableBitmap writeableBitmap = new WriteableBitmap(mePlayer,null);
SaveFileDialog saveFileDialog = new SaveFileDialog();
saveFileDialog.DefaultExt = ".bmp";
saveFileDialog.Filter = "(*.bmp, *.jpg)|*.bmp;*.jpg";
if(saveFileDialog.ShowDialog() == true)
{
//bu kısım linkten alıntıdır.http://forums.silverlight.net/t/114691.aspx/1
Stream stream = saveFileDialog.OpenFile();
byte[] buffer = GetBuffer(writeableBitmap);
stream.Write(buffer, 0, buffer.Length);
stream.Flush();
stream.Close();
}
}
Silverlight uygulaması yüklenirken, Video.aspx sayfasındaki QueryString değerine göre, VideoService webservisi aracılığıyla veri tabanından videoyu alıp mePlayer MediaElement kontrolünün Source özelliğine uri olarak veriyorum. Ayrıca Grap butonuna basıldığında video donduruluyor ve o andaki MediaElement kontrolünde beliren resim, bmp formatında kullanıcının bilgisayarına kaydediliyor. Bu noktada gereken encoder, GetBuffer metodu’dur. VideoService webservisindeki metodun içeriği ise aşağıdaki gibidir:
[WebMethod]
public Video VideoGetir(intid)
{
VideoLinqDataContextdc = new VideoLinqDataContext();
Videovideo = (from v indc.Videos
wherev.ID == id
selectv).FirstOrDefault();
returnvideo;
}
Şimdi video.aspx sayfamızı düzenleyelim. Bu sayfada sadece video oynatacağımız silverlight media playerimiz olacak. Bu nedenle sayfa tasarımında sadece silverlight uygulamasının host edileceği object nesnesi bulunacak.
<body>
<form id="form1" runat="server">
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2"width="500px"height="500px">
<param name="source"value="ClientBin/AspnetVideo.Player.xap"/>
<param name="onError"value="onSilverlightError"/>
<param name="background"value="white"/>
<param name="minRuntimeVersion"value="4.0.50826.0"/>
<param name="autoUpgrade"value="true"/>
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0"style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376"alt="Get MicrosoftSilverlight" style="border-style:none"/>
</a>
</object><iframe id="_sl_historyFrame"style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
</form>
</body>
Şu anda, uygulamamız artık kullanıma hazır. Web uygulamamızı çalıştırıdığımızda, default sayfasında kayıtlı videolar listeleniyor, upload sayfasında video kaydedip sunucuya yükleyebiliyorum. Video sayfasında ise seçtiğim videoyu izleyebiliyorum, anlık resim yakalayabiliyorum.
Makalede geliştirilen projedir.