TubePlayer.js

Kendi web sitesine Youtube videolarını eklememiş olan çok az ayıda kişi var bildiğim kadarıyla. Nadiren de olsa sitesinde bir kaç tane video yayınlayan kişiler vardır benim gibi. Şuan için yanılmıyorsam eğer 2 tane benim sitemde de bulunuyor. Bu kadar çok popüler  olduğu halde eklentilerini  saymaya çalışsanız belki parmak sayısını bile geçmeyecek kadar  azdır. En çok arattırılan örneklerden bir tanesi de Youtube videolarını oynatan playerdir. Bildiğim kadarıyla ücretsiz olanı yok ama WordPress için kullanılabilir ücretli olanı bulunuyor.

Daha önceleri paylaştığım bir yazıda aklıma fikir gelmediği için ne işe yarayabilir  diye açıklama  yapmıştım ama sonradan fark ettiğim kadarıyla mobil cihazlar için oldukça kullanışlı bir uygulamaydı. Bu yüzden TubePlayer hakkında bu tarz bir açıklama yapmayacağım. Şimdilik ne kadar kullanışlı yada faydalı olduğu hakkında bir açıklama yapmam fazla mantıklı değil ama jQuery TubePlayer uygulamasının çok işe yarar bir özelliği de bulunuyor. TubePlayer ile  video oynatma listeleri oluşturabilirsiniz.

TubePlayer  eklentisi ile  Youtube üzerinden web sayfanıza eklediğiniz videolarda belli başlı bir kaç özellik ile kendi tasarlamış olduğunuz butonlar, ikonlar yardımıyla oynatma, durdurma, ses azaltma, ses yükseltme, ileri sarma, geri sarma gibi işlemleri yapabilmeniz mümkün. Bu özellikler zaten video oynatıcı üzerinden bulunuyor olsa da belki  birilerinin işine yarayabilir yada kendi tasarladığı ikonlar ile bu işlemlerin yapılmasını isteyen kişiler olabilir diye paylaşmak istedim sizler ile.

Eklenti sayfasında bulunan örnek için şimdilik herhangi bir tasarım hazırlanmış değil. Sadece neyin nasıl yapılacağı hakkında değerler atanmış her butona. Burada size düşen görev photoshop tarzı bir program kullanıp yada internet üzerinden play stop vb ikonları bulup css ile eklentiye uyarlamak.   Özeleştirmesi kolay ve tasarım bilginize  bağlı  olarak mükemmel görünümler  oluşturabilirsiniz.

TubePlayer eklentisi  ile  iframe  içinde  açılmış  videoya  butonlar  yardımıyla yapabilecekleriniz.

• Oynatma
• Durdurma
• Ses Arttırma
• Ses Düşürme
• Video Kalitesi Ayarlama
• Video Kalitesi Düşürme
• Belirli bir noktaya videoyu  sarma (ileri yada geri)
• Başka videoya geçiş.

Temel kullanım

• Head  etiketleri  arasına eklenecek bölümler.

Js dosya  adresleri :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type='text/javascript' src='{your_path_to}/jQuery.tubeplayer.js'></script>

JavaScript : 

jQuery("#youtube-player-container").tubeplayer({
	width: 600, // the width of the player
	height: 450, // the height of the player
	allowFullScreen: "true", // true by default, allow user to go full screen
	initialVideo: "DkoeNLuMbcI", // the video that is loaded into the player
	preferredQuality: "default",// preferred quality: default, small, medium, large, hd720
	onPlay: function(id){}, // after the play method is called
	onPause: function(){}, // after the pause method is called
	onStop: function(){}, // after the player is stopped
	onSeek: function(time){}, // after the video has been seeked to a defined point
	onMute: function(){}, // after the player is muted
	onUnMute: function(){} // after the player is unmuted
});

•  Body  etiketleri  arasına eklenmesi gereken bölümler.

 Youtube videosunun oynatılacağı çerçeve : 

<div id='youtube-player-container'> </div>

 Videoyu  hareket  ettirmek için kullanacağınız  buton adresleri : 

<a href="#" onClick='jQuery("#youtube-player-container").tubeplayer("play")'> 
	Play video in player
</a>
<a href="#" onClick='jQuery("#youtube-player-container").tubeplayer("pause")'> 
	Pause player 
</a>
<a href="#" onClick='jQuery("#youtube-player-container").tubeplayer("stop")'> 
	Stop player 
</a>
<a href="#" onClick='jQuery("#youtube-player-container").tubeplayer("mute")'> 	
	Mute player 
</a>
<a href="#" onClick='jQuery("#youtube-player-container").tubeplayer("unmute")'> 
	Unmute player
</a>