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 
.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 
.
İ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 . İ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 . Ş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.
Yorum yapmak için lütfen giriş yapın veya üye olun