Jquery-Ajax Youtube Api ile Arama , Veri çekme

Büyük ölçekli siteler kullanıcılar kadar geliştiricileride düşünüyor ve kendi apilerini hazırlayarak geliştiricilere büyük kolaylıklar sağlıyorlar.Bunlardan biride youtube.Youtube api ile youtube içinde anlık arama , veri cekme , video oynatma , liste oluşturma , upload etme gibi bir çok özelliği kullanabiliyoruz.

Biz kendi sitemize bir arama kutusu koyup youtube içinde arama yaptırıp sonuçları listeleyelim

Ben bootstrap yardımıyla demoyu hazırladım.Sizde kendi csslerinizle ayarlayabilirsiniz.Hemen head tagları arasına gerekli dosyaları ve style kodlarımızı yazalım

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf8">
	<title>Mmuzikk Online Müzik Dinle ..</title>
	<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css"/>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<style>
		html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
		body{font:13px/1.5 'Helvetica Neue',Arial,'Liberation Sans',FreeSans,sans-serif}a:focus{outline:1px dotted}hr{border:0 #ccc solid;border-top-width:1px;clear:both;height:0}h1{font-size:25px}h2{font-size:23px}h3{font-size:21px}h4{font-size:19px}h5{font-size:17px}h6{font-size:15px}ol{list-style:decimal}ul{list-style:disc}li{margin-left:30px}p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{margin-bottom:20px}
		body{line-height:19px; color:#888888;}

		#listing { margin:0px 0px 0px -10px; width:970px;}
		.music-playlist {background-color:#f3f3f3; border:1px solid #e4e4e4; padding:10px 10px 0px 10px; margin:0px 20px 22px 0px; max-height:64px; min-width:198px; float:left;}
		.music-playlist-left { margin-right:10px; float:left;}
		.music-playlist-right { position: relative; margin:-50px 0px 0px 170px; float:right;}
		.music-playlist img { }
		.music-playlist h1 { font-size:16px; margin:0px 0px -2px 0px; line-height:24px;}
		#muzikgif {  margin-right:100px; }
		.nav-pills li { margin-left:0px; }
		.playerTitle h2 { line-height:10px; margin-top:8px; }
		#muzikcalar { float:left;padding:10px 8px; }
		.ie10 { padding:0px 8px;}
	</style>
  </head>

Yukarıdaki kodları direk kopyalayıp kullanabilirsiniz.Sadece css atamaları yaptık ve jquery , bootstrap kütüphanelerimizi çağırdık.Şimdi ise sayfamızda html kodlarıyla bir şablon oluşturalım

<div class="container-fluid">
		<div class="row-fluid">
			<div class="span3"  style="margin-top:30px;min-height:560px;"><center><h4 >Youtube Api Arama</h4></center>

				 <input type="text"  style="width:70%;" id="aranan" name="aranan" placeholder="Ara.." />
				 <button class="btn btn-small" style="margin-left:5px;margin-bottom:12px;" id="butonArama" type="submit" >
				 <i class="icon-search"></i> Ara </button>

			</div>
			<div  id="icerik" class="span9" style="margin-top:30px;min-height:560px;">
				<div class="page-header"><strong style="font-size:16px;">Arama Sonuçları</strong></div>
				<div id="listing">
				</div>
			</div>
		</div>
	</div>
	<div class="clearfix"></div>

Geldik en önemli bölüme.Jquery ajax fonksiyonuyla youtube apiyi kullanarak youtubeda arama yaptırıp dönen değeri göstereceğiz.Burda yukarıdaki şablonda hazırladığımız bazı div ve inputların id lerini kullanarak jqueryde nesne seçeceğiz.Hemen kodumuza geçelim

	<script type="text/javascript">
	$(document).ready(function() {
        // aranan inputuna her değer girildiğinde tekrar çalışır
	$("#aranan").keyup(function() {
        // listeleyeceğimiz divi temizliyoruz
	$("#listing").html('');
        // k değişkenine aldığımız değeri encodeurl ile url konseptine uygun hale getirdik
	var k = $("#aranan").val();
	var a = encodeURIComponent(k);
        // youtube bize sağladığı api ve filtreleri
        /*
         * q parametresi = aranacak kelime biz burda a değişkenini gönderdik
         * max-result = en çok kaç sonuç gösterilsin
         * category = istenilen kategoriye göre veri çekme
         * regionId = Arama sonuçlarında öncelik türkçe içerikler
        */
	var adres = 'http://gdata.youtube.com/feeds/api/videos?q='+a+'&max-results=24&v=2&alt=jsonc&category=Music&regionID=TR';
		$.ajax({
		type: "GET",
		url: adres,
		dataType:"jsonp",
		success: function(sonuc) {
			if(sonuc.data.items)	{
                 // Değer dönmüşse bir döngüye sokup gösteriyoruz
				$.each(sonuc.data.items, function(i,data) {
				var video_id = data.id;
				var video_baslik = data.title;
				var video_resim = data.thumbnail.sqDefault;
				var video_izlenme = data.viewCount;
                // değişkenlerimizi listelemede kullanacağımız div ile birlikte hazırladık
				var icerik='<div class="discounted-item pop music-playlist" style="opacity: 0.8;">		<img src="'+video_resim+'" alt="" height="40" width="40" class="music-playlist-left">'+video_baslik.substring(0,18)+'<p>İzlenme : '+video_izlenme+'</p><span style="display:none;" id="muzikid"></span><span style="display:none;" id="muziksrc"></span> <a class="code"   href="http://youtube.com/watch?v='+video_id+'" target="_blank" id="tikla" tiptitle="Open MP3 and Listen!"><img src="http://arsiv.mustafaercel.com/image/theme/play.png" id="playmusic" alt="" class="music-playlist-right"></a></div>';
                // list divimize yukarıda olusturdugumuz değişkeni ekledik
				$("#listing").append(icerik);
				});
			} else {
				$("#listing").html("<div id='video_yok'>Sonuç bulunamadı</div>");
			}
		}
		});
	});
});
</script>

Tüm Sayfa Kodları

Html Dosyasına Bak

Jquery-Ajax Youtube Api ile Arama , Veri çekme” hakkında 5 yorum

    1. Maalesef evet, Bu yazıyı en yakın zamanda güncelleyeceğim Geri bildirim için teşekkürler

  1. Merhaba
    Çok faydalı güzel bir örnek.çalısan halini biliyorum bu uygulamanın fakat eski sürüm api olduğu için şuan çalısmıyor sanırım güncellemeyi nezaman yapacaksınız ? Çok Teşekkürler 🙂

  2. mustafa bey çoksüper bir çalışma ancak çaılşmıyor bunu güncellersen çok daha süper olu elinize emeginize saglık umurım enkısa zamanda güncelersiniz çünkü çok ihtiyacım var böyle bir laışmaya teşekürler

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir