jPlayer

19Okunma
1 Yorum

jPlayer Web sitenize müzik çalar eklemeniz için Mark J Panaghiston tarafından hazırlanmış oldukça güzel bir müzik oynatıcı. Çıktığı ilk zamanlarda sadece tek bir tane demosu vardı ve şuanda zip dosyası içinde daha çok örneği bulunuyor.  Hemen hemen bütün cihazlar üzerinde çalışabilen ve Html5, Css3 destekli açık kaynak kodlu bir yazılımdır. İlk verdiğim download adresinde psd dosyaları da mevcut. Bu psd dosyalarını kullanarak kendinize göre tasarlayabilirsiniz. Mp3, mp4, ogg, webm ve wav dosyalarının tamamını çalabiliyor.

Destekleyen Tarayıcılar ve Platformlar : 

  1. Windows: Firefox, Chrome, Opera, Safari, IE6, IE7, IE8, IE9
  2. OSX: Safari, Firefox, Chrome, Opera
  3. iOS: Mobile Safari: iPad, iPhone, iPod Touch
  4. Android: Android 2.3 Browser
  5. Blackberry: OS 7 Phone Browser, PlayBook Browser+
Desteklenen Medya dosyaları
  1. HTML5: mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav
  2. Flash: mp3, mp4 (AAC/H.264), flv
Kullanım
  • Head  etiketleri arasına eklenmesi gereken bölümler.
Js ve stil dosyaları : 
		<link rel="stylesheet" href="css/not.the.skin.css">
		<link rel="stylesheet" href="circle.skin/circle.player.css">
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.transform.js"></script>
		<script type="text/javascript" src="js/jquery.grab.js"></script>
		<script type="text/javascript" src="js/jquery.jplayer.js"></script>
		<script type="text/javascript" src="js/mod.csstransforms.min.js"></script>
		<script type="text/javascript" src="js/circle.player.js"></script>
		<!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->

JavaScript : 

		<script type="text/javascript">
		$(document).ready(function(){

			/*
			 * CirclePlayer(jPlayerSelector, media, options)
			 *   jPlayerSelector: String - The css selector of the jPlayer div.
			 *   media: Object - The media object used in jPlayer("setMedia",media).
			 *   options: Object - The jPlayer options.
			 *
			 * Multiple instances must set the cssSelectorAncestor in the jPlayer options. Defaults to "#cp_container_1" in CirclePlayer.
			 */

			var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",
			{
				m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
				oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
			}, {
				cssSelectorAncestor: "#cp_container_1"
			});

			// This code creates a 2nd instance. Delete if not required.

			var myOtherOne = new CirclePlayer("#jquery_jplayer_2",
			{
				m4a:"http://www.jplayer.org/audio/m4a/Miaow-04-Lismore.m4a",
				oga:"http://www.jplayer.org/audio/ogg/Miaow-04-Lismore.ogg"
			}, {
				cssSelectorAncestor: "#cp_container_2"
			});
		});
		</script>
  •  Body etiketleri arasına eklenmesi gereken bölüm.

Html : 

		<!-- The jPlayer div must not be hidden. Keep it at the root of the body element to avoid any such problems. -->
		<div id="jquery_jplayer_1" class="cp-jplayer"></div>

		<!-- This is the 2nd instance's jPlayer div -->
		<div id="jquery_jplayer_2" class="cp-jplayer"></div>

		<div class="prototype-wrapper"> <!-- A wrapper to emulate use in a webpage and center align -->

			<!-- The container for the interface can go where you want to display it. Show and hide it as you need. -->

			<div id="cp_container_1" class="cp-container">
				<div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% -->
					<div class="cp-buffer-1"></div>
					<div class="cp-buffer-2"></div>
				</div>
				<div class="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% -->
					<div class="cp-progress-1"></div>
					<div class="cp-progress-2"></div>
				</div>
				<div class="cp-circle-control"></div>
				<ul class="cp-controls">
					<li><a href="#" class="cp-play" tabindex="1">play</a></li>
					<li><a href="#" class="cp-pause" style="display:none;" tabindex="1">pause</a></li>
				</ul>
			</div>

			<!-- This is the 2nd instance HTML -->

			<div id="cp_container_2" class="cp-container">
				<div class="cp-buffer-holder">
					<div class="cp-buffer-1"></div>
					<div class="cp-buffer-2"></div>
				</div>
				<div class="cp-progress-holder">
					<div class="cp-progress-1"></div>
					<div class="cp-progress-2"></div>
				</div>
				<div class="cp-circle-control"></div>
				<ul class="cp-controls">
					<li><a href="#" class="cp-play" tabindex="1">play</a></li>
					<li><a href="#" class="cp-pause" style="display:none;" tabindex="1">pause</a></li>
				</ul>
			</div>

		</div>

 

Html5 video player

Sürekli güncelleştirilen bir uygulama olduğu için baya yeni özellik eklenmiş. Bir zamanlar sadece yuvarlak ses dosyası oynatma örneği varken artık video oynatma özelliği de bulunuyor. Video player örneğini kullanarak dilerseniz web sitenize tek bir video ekleyin veya dilerseniz bir kaç tane video ekleyip tek tek oynatmasını sağlayın. Ziyaretçi sadece iki tane videoyu aynı anda oynamatamıyor ve bir tane izlerken diğerini oynattığı zaman bir önceki otomatik duruyor. Klavyeden aşağı ve yukarı tuşları ile ses düşürme, enter tuşuna basarak tam ekran yapabilme ve space tuşuna basarak ta oynatma durdurma gibi seçenekler kullanılabiliyor.

Ekran görüntüsü :

jPlayer

 

Yeni eklenmiş mp3, mp4 player ekran görüntüsü :

jPlayer

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-04-03 tarihinde yayınlandı,Toplam 4479 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(1 Yorum)
Yükleniyor...
hasan Yorumcu LV.1
2015-03-10 21:29:12 回 Yanıtla

hocam paylaşımınız için teşekkürler çok faydalı oldu ama jplayer’ı sayfama entegre ettiğim zaman bazı sıkıntılarla karşılaşıyorum
1-birden fazla player ekleyemiyorum (farklı sayfalara)
2-player’ı sayfaya entegre ettikten sonra tarayıcı geşmişini sildiğim zaman hiçbir şekilde tekrar sayfaya erişemiyorum, phpmyadmin’e dahi erişemiyorum pc’yi yeniden başlatmam gerekiyor
sorularımı cevaplarsanız çok sevinirim şimdiden sağolun….