Fare ile Resim Üzerine Gelince Video Önizlemesini Göstermek

Merhaba arkadaşlar. Video sitelerinde görüyorum bazen; küçük thumbnail üzerine gelince, videonun bir bölümünü önizleme şeklinde gösteriyor. Bunu nasıl yapabiliriz? Eklenti aradım ama bulamadım maalesef. İlgili siteye göz atabilirsiniz: https://portalistan.com/

gerek yok

Nasıl yapılabileceğini ben de merak ediyorum.

Merhaba!

İstediğiniz projenizi Yapı Kredi hesabınız olması durumda cumartesi, olmaması durumunda pazartesi EFT saatleri içerisinde teslim edebilirim. Ne zaman tamamlanmasını dilersiniz?

Düz yazılımla yapılması biraz zor gibi, muhtemelen videonun önizlemesini gif yapısı gibi hareketli olarak ayrıca kayıt edip önizleme veriyorlar yada sunucuda rmtp desteği varsa en düşük boyutu belirli aralıklarla oynatıyorlar. php eklentilerden ziyade sunucuda ffmpeg gibi bir yazılım desteği olması lazım.

Merhaba önizleme kısmını 1-3 saniyelik bir videoyu jquery ile oynattırabilirsiniz.
Ancak yeni 1-3 saniyelik önizleme videosu veya resim oluşturmak istiyorsanız. Birkaç seçenek çıkıyor karşımıza.
Birinci seçenek player için oluşturulan önizleme resimlerini kullanmak ki en makulü ve hızlısı.
Diğer seçenek video içinde belli bir kısımı keserek kullanmak.

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?

ffmpeg ile yapabilirsiniz. O screenshot'u sprite olarak kullanıp, tek resimin koordinat düzleminde oynatarak daha küçük olan element içinde göstertiyordur, öyle yapması onun için daha hayırlı olur.

Bu gibi durumların, daha doğrusu çoğu durumun çözülebileceği gibi, bu konuda toslayacağınız duvar yazılım değil, networktür. Karşıdaki ağ isteklerinizi engelleyebilir, limitleyebilir, proof of work veya delay koyabilir, referalı kısıtlayabilir, backend de çözülmesini istediğiniz koddan ziyade frontendde bir token sistemi oluşturabilir, hash fonksiyonuna bir 100 round daha attırması sizin aylık çabalarınızın birkaç saniyelik tuş eforlarıyla boşa gitmesine sebep olabilir, yem olarak network requestleri yaptırtabilirler ve kimliğinizi belirleyebilirler.

kısacası bir şirketle yasal yoldan scrape için anlaşmazsanız büyük bir iş yapamazsınız. Network engelini sadece bir nebze rotating proxylerle hafifletebilecek olsanız dahi çoğu proxy servisinin IP aralıkları registrarlar tarafından büyük firmalara bildirilir ve daha kullanmadan elinizde kalır.

Ben küçük bir proje yapacağanızı düşündüm fakat orta ölçekli dahi olsa kendilerinden API veya scrape izni talep edin. Sormanızdan zarar gelmez. Kendi API'ları dahi buna halka açık şekilde olanak verdiğini görsenizde düşük limitlere takılırsınız ve tekrar izin istemek adımına geri dönmek zorunda kalırsınız.

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>