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ü :
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;}
UstaDerslik
