Merhaba. Birkaç video sitesini kontrol ettiğimde, player için oluşturulan önizleme resimlerinin kullanıldığını gördüm. Player üzerinde tek bir thumbnail görünmesine karşın, resme bak dediğim zaman karşıma video'ya ait 8-10 farklı sahne olan bir resim çıktı. Bunu nasıl yapabiliriz?
merhaba şöyle bir şey yapabilirsiniz.
Basit düzeyde olabildiğince anlaşılır kodlar kullanmaya çalıştım.
Kendinizce düzenlemeler yaparak güzel bir şeyler çıkartabilirsiniz.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
#onizle{
background-image:url('https://i9.ytimg.com/sb/-sq7PYiMonw/storyboard3_L2/M0.jpg?sigh=rs%24AOn4CLBvtDjfM2gMpN9crJLVtk-Zy-5A1w');
width: 160px;
height: 90px;
}
.o-s-1{
background-position: 0px 0px;
}
.o-s-2{
background-position: -160px 0px;
}
.o-s-3{
background-position: -320px 0px;
}
.o-s-4{
background-position: -480px 0px;
}
.o-s-5{
background-position: -640px 0px;
}
.o-s-6{
background-position: 0px -90px;
}
.o-s-7{
background-position: -160px -90px;
}
.o-s-8{
background-position: -320px -90px;
}
.o-s-9{
background-position: -480px -90px;
}
.o-s-10{
background-position: -640px -90px;
}
.o-s-11{
background-position: 0px -180px;
}
.o-s-12{
background-position: -160px -180px;
}
.o-s-13{
background-position: -320px -180px;
}
.o-s-14{
background-position: -480px -180px;
}
.o-s-15{
background-position: -640px -180px;
}
.o-s-16{
background-position: 0px -270px;
}
.o-s-17{
background-position: -160px -270px;
}
.o-s-18{
background-position: -320px -270px;
}
.o-s-19{
background-position: -480px -270px;
}
.o-s-20{
background-position: -640px -270px;
}
.o-s-21{
background-position: 0px -360px;
}
.o-s-22{
background-position: -160px -360px;
}
.o-s-23{
background-position: -320px -360px;
}
.o-s-24{
background-position: -480px -360px;
}
.o-s-25{
background-position: -640px -360px;
}
</style>
<div id="onizle" class="o-s-1"></div>
<script>
$(function() {
$('#onizle').mouseover(function() {
var time = 1;
var interval = setInterval(function() {
if (time < 26) {
$('#onizle').attr('class', 'o-s-' + time++);
}
else {
clearInterval(interval);
}
}, 100);
});
$('#onizle').mouseout(function() {
$(this).attr('class', 'o-s-1');
});
});
</script>style kodlarını şu şekilde yaparak dailymotion benzeri bir şey olabilir
<style>
#onizle{
background-image:url('http://s2.dmcdn.net/lRBdQ/320x-Yie.jpg');
width: 320px;
height: 180px;
}
.o-s-1{
background-position: 0px 0px;
}
.o-s-2{
background-position: 0px -180px;
}
.o-s-3{
background-position: 0px -360px;
}
.o-s-4{
background-position: 0px -540px;
}
.o-s-5{
background-position: 0px -720px;
}
.o-s-6{
background-position: 0px -900px;
}
.o-s-7{
background-position: 0px -1080px;
}
.o-s-8{
background-position: 0px -1260px;
}
</style>