Yükleniyor ...

Üye giriş

E-posta adresiniz
Şifreniz
Şifremi unuttum

Üye Kayıt

Kullanıcı adı
E-posta adresiniz
Şifreniz
Şifre tekrar
Giriş yap

Html5 ve jQuery ile video player yapımı

Html5 ile gelen video etiketi ile kendi video oynatıcımızı yapabiliriz hatta javascript ve css ile video oynatıcısını istediğimiz gibi düzenleyebiliriz. İlk olarak dosyalarımızı oluşturalım. 

Oluşturulacak dosyalar : index.html,custom.js,style.css 

Siz isterseniz farklı isimlerde verebilirsiniz dosyalara smile.Video player yapımına başlamadan önce ikonlar ile uğraşmamak için "font awesome" kullanacağız siz isterseniz kendi çizdiğiniz ikonlarıda player üzerinde kullanabilirisiniz.

 Buraya tıklayarak font awesome'nin  sitesinden download butonuna tıklayıp indirebiliriz. İndirdikten sonra zip dosyasının içindeki "css" klasörü ve "fonts" klasörleri bizim işimize yarayacak bu klasörleri çalıştığımız klasöre kopyalıyalım. Css klasörü içersinde iki tane dosya olacak biz sıkıştırılmış versiyonu yani "font-awesome.min.css" dosyasını kullanacağız o yüzden diğer dosyayı silebiliriz. Son olarak oluşturduğumuz "style.css" dosyasınıda "css" klasörüne atalım. Artık kod yazmaya başlayabiliriz laughing.

İndex.html dosyamızı açalım ve ilk olarak javascript ve css dosyalarımızı sayfaya dahil edelim.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Video player</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
</head>
<body>
	
	

	<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="custom.js"></script>
</body>
</html>

Şimdi video player ekleyelim. 

<video id ="videoplayer" width="500" controls>
   <source src="deneme.mp4" type="video/mp4">
	Tarayıcınız html5 desteklemiyor
</video>

Source src yazan yere videomuzun yolunu belirtiyoruz. Bu şekilde html5 standart video playerini kullandık. Şimdi javascript ile kendimize göre düzenleyelim laughing. İlk olarak video etiketine eklediğimiz "controls" özelliğini silelim. Sildikten sonra artık video oynatma butonu ses açma butonu gibi butonlar gözükmeyecektir. Şimdi javascript bölümüne geçmeden önce html ile butonlarımızı vs ekleyelim.

 

<div class="video">
		<video id ="videoplayer" width="500">
			<source src="deneme.mp4" type="video/mp4">
				Tarayıcınız html5 desteklemiyor
			</video>
			<div class="video_butonlar">
				<button class="baslat"><i class="fa fa-play" aria-hidden="true"></i></button>
				<span class="sure"></span>	
				<input type="range" class="video_sure" min="0" max="100" value="0"/>
				<input type="range" class="video_ses" min="0" max="100" value="100" />
				<button class="ses"><i class="fa fa-volume-up" aria-hidden="true"></i></button>
			</div>
		</div>

Son hali bu şekilde olacak. İsterseniz kendinize göre ekleme yapabilirsiniz laughing. Şimdi Css ile biçim verelim.

.video{width:500px;}
.video_butonlar{
	margin-top:-4px;
	background: #3e3737;
	padding:10px;
}
button.baslat, button.ses{
	background: none;
	color:#fff;
	outline: none;
	border:none;
	font-size:17px;
}
input[type=range] {
	outline: none;
    -webkit-appearance: none;
    background-color: #5a5555;
    width: 200px;
    height:10px;
}

input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
    background-color: #c52b2b;
    margin-left: -2px;
    width: 15px;
    height: 15px;
    border-radius: 40px;
}
span.sure
{
	font-family: Arial;
	font-size: 14px;
	color:#fff;
}
input.video_sure
{
	cursor: pointer;
	width:54%;
}
input.video_ses
{
	width:60px;
	float:right;
	margin-top: 5px;
}

Şimdi custom.js dosyamızı açalım ve javascript kodlarımızı yazalım.  

$(function(){

	var videoplayer = $('video#videoplayer'); // İd'si videoplayer olan Video etiketini seç
	var video = videoplayer[0]; // videoplayer değişkenin sıfırıncı değerini al (Jquery ile çalışmak için bu şekilde sıfırıncı değeri almalıyız )

	function toplamSureBul(parametre=false) {  // Verilen parametrenin (dakika:saniye) olarak süresini bulur
		if(parametre == false)  // Eğer parametre false ise
		{
			var toplamSure = video.duration;  // video uzunluğunu toplamSure değişkenine aktar
		}else
		{
			var toplamSure = video.currentTime; // video anlık zamanını toplamSure değişkenine aktar
		}
		saniye = Math.floor(toplamSure);  // Saniye olarak bul ve tam sayıya yuvarla
		dakika = Math.floor(toplamSure/60); // Dakika olarak bul ve tam sayıya yuvarla
		saniye = Math.floor(saniye % 60); // Saniye 
		dakika = dakika < 10 ? "0"+dakika : dakika; 
		saniye = saniye < 10 ? "0"+saniye : saniye;
		return dakika+":"+saniye;
	}

	video.oncanplay = function() {  // Video hazır olduğu zaman
    	$('span.sure').text( toplamSureBul(true)+" / "+toplamSureBul() ); // Class'ı süre olan span'a toplam süre fonksiyonundan gelen değeri aktar
	};

	
});

Basit olarak ilk önce toplam süremizi bulduk şimdi videoyu başlatma işlemimizi ve diğer işlemleri yapalım.

$('button.baslat').on("click",function(){  // Başlat butonuna tıklandığı zaman
		if(video.paused) // Eğer video çalıştırılırsa
		{
			$(this).html('<i class="fa fa-pause" aria-hidden="true"></i>'); // butona pause ikonu ekle
			video.play();  // Videoyu çalıştır
		}else 
		{
			$(this).html('<i class="fa fa-play" aria-hidden="true"></i>');  // butona play ikonu ekle
			video.pause(); // Videoyu durdur
		}
		
	});

	video.ontimeupdate = function()  // Videonun her çalıştığı süre boyunca
	{
		video_sure();  // video_sure fonksiyonunu çalıştır
	}

	function video_sure()  // Bu fonksiyon ile her saniye video süre çubuğu ve zaman bilgisi yazan yerler güncellenecek
	{ 
		var video_suan=video.currentTime * (100 / video.duration);  // Videonun şuanki zamanını bul
		$('input.video_sure').val(video_suan);  // class'ı video_sure olan inputun değerini video_suan değişkenine eşitle
		$('span.sure').text( toplamSureBul(true)+" / "+toplamSureBul() ); // Her saniye boyunca class'ı süre olan spanın değerini güncelle
	}

	video.onended = function()  // Eğer video biterse
	{
		$('button.baslat').html('<i class="fa fa-play" aria-hidden="true"></i>'); // class'ı başlat olan butona play butonu ekle
		video.pause(); // Videoyu durdur
	}

	$('input.video_sure').change(function(){  // Eğer video süre çubuğu değiştirilse 
		var video_suan_sure=video.duration*($(this).val()/100); // Süre çubuğunun değerini bul
		video.currentTime=video_suan_sure; // Ve videonun zamanını süre çubuğundaki zamana eşitle
	});

	$('input.video_ses').change(function(){  // Ses çubuğu değiştirilirse
		video.volume=$(this).val()/100;  // Videonun sesini ses çubuğundaki değere eşitle
	});

	$('button.ses').click(function(){ // class'ı ses olan butona tıklayınca
		$('input.video_ses').prop('value','0');
		video.volume=0; // Sesi kapat
	});

Kodlarımızın yanında açıklamasını yazdık.  Javascript dosyamızın son hali bu şekilde olacak.

$(function(){

	var videoplayer = $('video#videoplayer'); // İd'si videoplayer olan Video etiketini seç
	var video = videoplayer[0]; // videoplayer değişkenin sıfırıncı değerini al (Jquery ile çalışmak için bu şekilde sıfırıncı değeri almalıyız )

	function toplamSureBul(parametre=false) {  // Verilen parametrenin (dakika:saniye) olarak süresini bulur
		if(parametre == false)  // Eğer parametre false ise
		{
			var toplamSure = video.duration;  // video uzunluğunu toplamSure değişkenine aktar
		}else
		{
			var toplamSure = video.currentTime; // video anlık zamanını toplamSure değişkenine aktar
		}
		saniye = Math.floor(toplamSure);  // Saniye olarak bul ve tam sayıya yuvarla
		dakika = Math.floor(toplamSure/60); // Dakika olarak bul ve tam sayıya yuvarla
		saniye = Math.floor(saniye % 60); // Saniye 
		dakika = dakika < 10 ? "0"+dakika : dakika; 
		saniye = saniye < 10 ? "0"+saniye : saniye;
		return dakika+":"+saniye;
	}

	video.oncanplay = function() {  // Video hazır olduğu zaman
    	$('span.sure').text( toplamSureBul(true)+" / "+toplamSureBul() ); // Class'ı süre olan span'a toplam süre fonksiyonundan gelen değeri aktar
	};

	$('button.baslat').on("click",function(){  // Başlat butonuna tıklandığı zaman
		if(video.paused) // Eğer video çalıştırılırsa
		{
			$(this).html('<i class="fa fa-pause" aria-hidden="true"></i>'); // butona pause ikonu ekle
			video.play();  // Videoyu çalıştır
		}else 
		{
			$(this).html('<i class="fa fa-play" aria-hidden="true"></i>');  // butona play ikonu ekle
			video.pause(); // Videoyu durdur
		}
		
	});

	video.ontimeupdate = function()  // Videonun her çalıştığı süre boyunca
	{
		video_sure();  // video_sure fonksiyonunu çalıştır
	}

	function video_sure()  // Bu fonksiyon ile her saniye video süre çubuğu ve zaman bilgisi yazan yerler güncellenecek
	{ 
		var video_suan=video.currentTime * (100 / video.duration);  // Videonun şuanki zamanını bul
		$('input.video_sure').val(video_suan);  // class'ı video_sure olan inputun değerini video_suan değişkenine eşitle
		$('span.sure').text( toplamSureBul(true)+" / "+toplamSureBul() ); // Her saniye boyunca class'ı süre olan spanın değerini güncelle
	}

	video.onended = function()  // Eğer video biterse
	{
		$('button.baslat').html('<i class="fa fa-play" aria-hidden="true"></i>'); // class'ı başlat olan butona play butonu ekle
		video.pause(); // Videoyu durdur
	}

	$('input.video_sure').change(function(){  // Eğer video süre çubuğu değiştirilse 
		var video_suan_sure=video.duration*($(this).val()/100); // Süre çubuğunun değerini bul
		video.currentTime=video_suan_sure; // Ve videonun zamanını süre çubuğundaki zamana eşitle
	});

	$('input.video_ses').change(function(){  // Ses çubuğu değiştirilirse
		video.volume=$(this).val()/100;  // Videonun sesini ses çubuğundaki değere eşitle
	});

	$('button.ses').click(function(){ // class'ı ses olan butona tıklayınca
		$('input.video_ses').prop('value','0');
		video.volume=0; // Sesi kapat
	});
});

Ve son olarak bu linkten daha fazla bilgiye sahip olabilirsiniz.

Yorumlar(0)

Yorum yapmak için lütfen giriş yapın veya üye olun