jQuery Youtube TubePlayer Plugin

12 Mart 2013 | Kategori: jQuery,Webmaster | Yazar: mintik

jQuery Youtube TubePlayer jQuery TubePlayer eklentisi son zamanlarda IPhone ve Ipod’un iyice popüler hale gelmesi nedeni ile Nirvana Tikku tarafından geliştirilmiştir. Eklentinin temel amacı websitelerde yayınlanan youtube videolarını daha büyük ikonlar yardımıyla oynatmak, durdurmak ve ses ayarlarını değiştirebilmektir. Bildiğiniz üzere mobil cihazlarda bu işlevleri yerine getirmek için video oynatıcılardaki ikonları kullanmak biraz güç ara sıra yanlış bölümlerede tıklanma ihtimali olabiliyor.

Download jQuery Youtube TubePlayer Plugin

Demo jQuery Youtube TubePlayer Plugin

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.

jQuery ve TubePlayer eklenti 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>

1 2	<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
});

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>

1	<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>