jPlayer

By

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ü :

video player

 

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

mp4 çalar mp3



1 Comment
  1. hasan 6 years ago
    Reply

    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….

Leave a Comment

Your email address will not be published.

You may also like

Trend