HTML5 Video Player örneğim
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

HTML5 Video Player örneğim

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(3395)
RAPOR ET
Bu gün boş bir vaktimde html5 ile video player yapayım dedim.Bir şeyler yaptım az çok bir şeye benzedi paylaşmak istedim.Çok güzel olmadı ama incelemek isteyen olur diye paylaşmak istedim.

İndir : http://ustaderslik.com/dosya/vp.rar

İncele : http://ustaderslik.com/ornek/vp/

Görüntüsü :
http://ustaderslik.com/resim/ders/5g8rg458.png

Html Kodları :

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Video Player</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="vp.css" />
</head>
<body>
<div class="arkaplan"></div>
<div class="vp_ana">

<video width="560" height="315" id="vp_video">
<source src="video.mp4" type="video/mp4">
Tarayıcı HTML5 Desteklemiyor...
</video>
<div class="temiz"></div>
<div class="vp_kontrol">
<div class="vp_cubuk"></div>
<div class="vp_buton" id="vp_oynat" ></div>
<div class="vp_buton" id="vp_dur" ></div>
<div class="vp_buton" id="vp_tekrar"></div>
<div class="vp_buton" id="vp_ses"></div>
<div class="vp_sescubuk"></div>
<div class="vp_buton" id="vp_genis"></div>
<div class="vp_buton" id="vp_kucuk"></div>
<div class="vp_buton" id="vp_tamekran"></div>
<div class="vp_buton" id="vp_tamekran2"></div>
</div>
</div>
<script type="text/javascript" src="vp.js"></script>

</body>
</html>

Js Kodları :

$(function(){

var vp_player=100,
ses=0.5,
vpvideo=document.getElementById("vp_video"),
sure=vpvideo.currentTime,
set;

vpvideo.volume=ses;

$(".vp_cubuk").slider({min:0,max:560,value:0,step:0.1,animate:true,range:"min",
change: function() {
if (vpvideo.paused){
vpvideo.currentTime=$(this).slider("value");
}
},
slide: function(){
vpvideo.currentTime=$(this).slider("value");
}
});


$("#vp_genis").click(function(){
$(this).hide();
$("#vp_kucuk").show(); tc();
$(".vp_ana").css({"width":"850px","height":"500px" })
$(".vp_kontrol").css({"width":"850px"})
$(".vp_cubuk").css({"width":"850px"})
$("#vp_video").css({"width":"850px","height":"485px" })
});

$("#vp_kucuk").click(function(){
$(this).hide();
$("#vp_genis").show(); tc();
$(".vp_ana").css({"width":"560px","height":"360px" })
$(".vp_kontrol").css({"width":"560px"})
$(".vp_cubuk").css({"width":"560px"})
$("#vp_video").css({"width":"560px","height":"315px" })
});

$("#vp_tamekran").click(function(){
$(this).hide();$("#vp_tamekran2").show();
var vu=($(window).width()-$(".vp_kontrol").width())/2;
if (vpvideo.requestFullscreen) {
vpvideo.requestFullscreen();$(".vp_kontrol").css("left",vu+"px")
} else if (vpvideo.msRequestFullscreen) {
vpvideo.msRequestFullscreen();$(".vp_kontrol").css("left",vu+"px")
} else if (vpvideo.mozRequestFullScreen) {
vpvideo.mozRequestFullScreen();$(".vp_kontrol").css("left",vu+"px")
} else if (vpvideo.webkitRequestFullscreen) {
vpvideo.webkitRequestFullscreen();$(".vp_kontrol").css("left",vu+"px")
}
});

$("#vp_tamekran2").click(function(){
$(this).hide();$("#vp_tamekran").show();
tc();
});

$(window).keyup(function(e){
if(e.which==27){
$(".vp_kontrol").css("left","0px")
}
})

$(".vp_sescubuk").slider({min:0,max:1,value:0.5,step:0.01,animate:true,range:"min",
change: function() {
ses=$(this).slider("value");
vpvideo.volume=ses;
if(ses==0){
$("#vp_ses").css("background-position","-20px -33px");
}else{
$("#vp_ses").css("background-position","-20px -5px");
}
}
});

$("#vp_ses").click(function(){
if(ses>0){
$(".vp_sescubuk").slider({value:0}); ses=0;
$("#vp_ses").css("background-position","-20px -33px");
}else{
$(".vp_sescubuk").slider({value:0.5}); ses=0.5;
$("#vp_ses").css("background-position","-20px -5px");
}
})

$("#vp_tekrar").click(function(){
vpvideo.pause();
$( ".vp_cubuk" ).slider({ value:0 });
vpvideo.currentTime=0;
vpvideo.play();
})

$("#vp_oynat").click(function(){
vpvideo.play();
$(this).hide();
$("#vp_dur").show();
var tsure=vpvideo.duration;
$( ".vp_cubuk" ).slider({ max:tsure });
set=setInterval(function(){
sure=vpvideo.currentTime;
$( ".vp_cubuk" ).slider({ value:sure });
if(tsure==sure){
vpvideo.pause();
$("#vp_dur").hide();
$("#vp_oynat").show();
clearInterval(set);
}
},200);
});

$("#vp_dur").click(function(){
vpvideo.pause();
$("#vp_oynat").show();
$(this).hide();
clearInterval(set)
});

function tc(){
$(".vp_kontrol").css("left","0px")
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}

});

Css Kodları :
*{margin:0;padding:0;border:0;}
body{background-color:#fff;}

.temiz{clear:both;}

.vp_ana{width:560px;height:360px;background:#f4f4e9;margin:auto;margin-top:100px;position:relative;}
.vp_kontrol{width:560px;height:45px;background:#f4f4e9;position:absolute;bottom:0;left:0;z-index:2147483647;}
.vp_cubuk{width:560px;height:15px;background:#adada7;position:absolute;top:0;left:0;}
.vp_sescubuk{width:100px;height:12px;background:#adada7;position:absolute;top:26px;left:105px;}
.vp_buton{width:20px;height:22px;background:url(vp-buton.png);position:absolute;top:20px;cursor:pointer;}
#vp_oynat{left:25px;background-position:0px -33px;}
#vp_oynat:hover{background-position:0px -5px;}
#vp_dur{display:none;top:21px;left:25px;background-position:-145px -33px;}
#vp_dur:hover{background-position:-145px -5px;}
#vp_tekrar{left:55px;background-position:-45px -33px;}
#vp_tekrar:hover{background-position:-45px -5px;}
#vp_ses{left:85px;background-position:-20px -5px;}
#vp_tamekran{width:30px;right:25px;background-position:-68px -33px;}
#vp_tamekran:hover{background-position:-68px -6px;}
#vp_tamekran2{display:none;width:30px;right:25px;background-position:-68px -33px;}
#vp_tamekran2:hover{background-position:-68px -6px;}
#vp_genis{width:25px;right:60px;background-position:-120px -33px;}
#vp_genis:hover{background-position:-120px -6px;}
#vp_kucuk{display:none;width:25px;right:60px;background-position:-120px -6px;}
#vp_kucuk:hover{background-position:-120px -33px;}

.vp_cubuk .ui-slider-range-min{width:100px;height:15px;position:absolute;background:#4cc4eb;}
.vp_sescubuk .ui-slider-range-min{width:100px;height:12px;position:absolute;background:#4cc4eb;}

::-webkit-media-controls {display:none !important;}
#vp_video::-webkit-media-controls {display:none !important;}
#vp_video::-webkit-media-controls-enclosure {display:none !important;}




Caner
Caner 3 Yıl Önce Cevaplandı
Güzel bence peki otomatik oynatmak icin ne yapmak lazım?
cArleone
cArleone 3 Yıl Önce Cevaplandı
video tagına autoplay=true verirsen otomatik başlar.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol