YouTube Video Arama ve Video Yönetimi (YouTubeV3 API)

Merhaba, bu makalemizde YouTubeV3 API yardımıyla youtube üzerinden video arama sonuçlarını alıp, gelen videoların yönetimini yapmayı öğreneceğiz.

Makaleyi bir öğretici olması sebebiyle demo bir proje olarak planladım. Böylelikle bootstrap kullanarak makale sonucunda örnek bir proje sahibi olmuş olacaksınız. Lütfen başlıkları adım adım takip edin.

Adım: HTML, JS ve CSS eklemelerini yapalım

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="//code.jquery.com/jquery-2.1.4.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js" type="text/javascript"></script>

Yukarıdaki importlarımız genel işleyiş içindi. Şimdi ise örnek bir arama teması için lütfen hazırladığım aşağıdaki örnek HTML dosyasını entegre edin.

<div class="row-fluid">
	 <main id="content" role="main" class="span12">
		<!-- Begin Content -->
		<div id="hyv-page-container" style="clear:both;">
			 <div class="hyv-content-alignment">
				 <div id="hyv-page-content" class="" style="overflow:hidden;">
					 <div class="container-4">
						 <form action="" method="post" name="hyv-yt-search" id="hyv-yt-search">
						 	<input type="search" name="hyv-search" id="hyv-search" placeholder="Search..." class="ui-autocomplete-input" autocomplete="off">
						 	<button class="icon" id="hyv-searchBtn"></button>
						 </form>
					 </div>
					 <div>
						 <input type="hidden" id="pageToken" value="">
						 <div class="btn-group" role="group" aria-label="..."  style="display:none;">
							 <button type="button" id="pageTokenPrev" value="" class="btn btn-default">Prev</button>
							 <button type="button" id="pageTokenNext" value="" class="btn btn-default">Next</button>
						 </div>
					 </div>
					 <div id="hyv-watch-content" class="hyv-watch-main-col hyv-card hyv-card-has-padding">
						 <ul id="hyv-watch-related" class="hyv-video-list">
						 </ul>
					 </div>
					
					 <!-- Ads width 300px holder start -->
					 <div id="hyv-watch-sidebar-ads" style="float:left;">
						 <div id="hyv-watch-channel-brand-div" class="">
							 <div id="hyv-watch-channel-brand-div-text">Advertisement</div>
							 <div class="hyv-watch-sidebar-section">
								 <div style="font-weight:bold;height:10px;">JSON Responce</div>
								 <div class="hyv-watch-sidebar-body"></div>
							 </div>
						 </div>
					 </div>
					 <!-- Ads width 300px holder end -->
				 </div>
			 </div>
		 </div>
	 </main>
 </div>

Adım:Javascript

Bu bölümde YouTube arama işlemi ve otomatik tamamlama önerisi için gerekli JS kodlarımızı yazacağız.

$(document).ready(function() {
	 $("#pageTokenNext").on( "click", function( event ) {
		 $("#pageToken").val($("#pageTokenNext").val());
		 youtubeApiCall();
	 });
	 $("#pageTokenPrev").on( "click", function( event ) {
		 $("#pageToken").val($("#pageTokenPrev").val());
		 youtubeApiCall();
	 });
	 $("#hyv-searchBtn").on( "click", function( event ) {
		 youtubeApiCall();
		 return false;
	 });
	 jQuery( "#hyv-search" ).autocomplete({
		 source: function( request, response ) {
			 //console.log(request.term);
			 var sqValue = [];
			 jQuery.ajax({
				 type: "POST",
				 url: "http://suggestqueries.google.com/complete/search?hl=en&ds=yt&client=youtube&hjson=t&cp=1",
				 dataType: 'jsonp',
				 data: jQuery.extend({
				 q: request.term
				 }, { }),
				 success: function(data){
					 console.log(data[1]);
					 obj = data[1];
					 jQuery.each( obj, function( key, value ) {
						 sqValue.push(value[0]);
					 });
					 response( sqValue);
				 }
			 });
		 },
		 select: function( event, ui ) {
		 setTimeout( function () { 
		 youtubeApiCall();
		 }, 300);
		 }
	 }); 
});

Aşağıdaki JavaScript fonksiyonu YouTube videolarını YouTube Search V3 API üzerinden almaya yarayacak. Aslında bu fonksiyon en can önemli nokta. API_KEY bölümüne Youtube üzerinden aldığınız key bilgisini eklemeniz gerekiyor.

function youtubeApiCall(){
 $.ajax({
	 cache: false,
	 data: $.extend({
		 key: 'API_KEY',
		 q: $('#hyv-search').val(),
		 part: 'snippet'
	 }, {maxResults:20,pageToken:$("#pageToken").val()}),
	 dataType: 'json',
	 type: 'GET',
	 timeout: 5000,
	 url: 'https://www.googleapis.com/youtube/v3/search'
 })
.done(function(data) {
	$('.btn-group').show();
	 if (typeof data.prevPageToken === "undefined") {
	 	$("#pageTokenPrev").hide();}else{$("#pageTokenPrev").show();
	 }
	 if (typeof data.nextPageToken === "undefined") {
	 	$("#pageTokenNext").hide();}else{$("#pageTokenNext").show();
	 }
	 var items = data.items, videoList = "";
	 $("#pageTokenNext").val(data.nextPageToken);
	 $("#pageTokenPrev").val(data.prevPageToken);
	 $.each(items, function(index,e) {
		 videoList = videoList + '<li class="hyv-video-list-item"><div class="hyv-content-wrapper"><a href="" class="hyv-content-link" title="'+e.snippet.title+'"><span class="title">'+e.snippet.title+'</span><span class="stat attribution">by <span>'+e.snippet.channelTitle+'</span></span></a></div><div class="hyv-thumb-wrapper"><a href="" class="hyv-thumb-link"><span class="hyv-simple-thumb-wrap"><img alt="'+e.snippet.title+'" src="'+e.snippet.thumbnails.default.url+'" width="120" height="90"></span></a></div></li>';
	 });
	 $("#hyv-watch-related").html(videoList);
	 // JSON Response to display for user
	 new PrettyJSON.view.Node({
		 el:$(".hyv-watch-sidebar-body"), 
		 data:data
	 });
 });
}

Soru, görüş ve önerilerinizi alt kısımda bulunan yorum bölümünden paylaşabilirsiniz. Kolaylıklar dilerim.