Home JQuery Slider Video Galeri Örneği
Slider Video Galeri Örneği

Slider Video Galeri Örneği

1.14K
22

Merhaba arkadaşlar web sitelerdeki sliderlar genelde resim içerikli olurlar. Peki orada oynatmak ister misiniz? Peki nasıl yapacaksınız? Eğer sitene video eklemeyi ve nasıl yerleştireceğini öğrenmek istiyorsan işte tam aradığın yere geldiğini söyleyebilirim. Zaten makalelerimiz hep bu tarzda, yani kolay kolay başka sitelerde bulamayacağın türleri…Neyse… Şimdi asıl konumuza geçelim. Sitenizde ki sliderınızda  video gösterimi yapmak istiyorsunuz o zaman aşağıdaki linkte  tıklayarak dosyaları bilgisayarınıza indirmekle başlayabilirsiniz.

İndirdikten sonra içerisinde index.html dosyasını herhangi bir editör ıyla açıp kodlarını görebilirsiniz. Zaten html kodlamadan anlayan bir arkadaş hemen durumu çözecektir. Yine de kendi sitenizde kullanmak istiyorsanız , aşağıda anlatacaklarımı iyi dinlemelisiniz.

index.html dosyasında head ile head arasındaki tüm kodları kopyalayıp kendi sitenize yerleştirmekle başlayabilirsiniz. Zaten kodlara dikkat ettiğinizde açıklama satırını göreceksiniz, ben kopyalanacak alanları orada belirttim.

Sonrasında ;

 ile başlayan kısmı kopyalayıp kendi div ‘inizin içine kopyalıyorsunuz. Kopyalayacağınız o satırını da açıklama satırı ile belirttim.

Yukarıdaki alanları kendi sitenize yerleştirdikten sonra, kendi sitenizin div genişliği ve yüksekliğine göre düzenlemeyi unutmayın, yoksa siteniz dağılabilir. Çünkü bu slider gördüğünüz gibi baya geniş bir video sliderdır.

Daha sonra ise, videogal.xml dosyasını herhangi bir editör programı ile açarak videolarını ekleyebilirsin.


videourl=”video/video.flv”
previewimage=”previewimage/preview.jpg”

videourl yazan kısma flv uzantılı videonun ismini yazacaksın ve o videoyu video klasörünün içine atacaksın. Previewimage klasörüne ise videonun basit bir resmini koyacaksın. Çünkü slider başlamadan önce o resim görünmesi gerekiyor. Örnek resim zaten Previewimage klasöründe var. Diğer videolarıda xml dosyasındaki sıralamaya göre ekleyip işlemi sonlandıracaksın. Hepsi bu kadar.

Anlamadığınız bir yerde buradan benimle iletişime geçebilirsiniz. Kolay gelsin.

ÖNEMLİ: yakın zamanda desteğini çektiği için bu slider sadece Chromeda çalışmamaktadır. Diğer Browserların hepsinde çalışmaktadır.

(1137)

omerbozalan 1981 doğumluyum. Üniversite eğitimimi, Sakarya Ünv. Elektronik ve Bilgisayar Öğretmenliğini bitirerek tamamladım. Ayrıca C Sınıfı İş Sağlığı ve Güvenliği Uzmanıyım. 2014 Nisan ayında Adobe Dreamweaver CS6 Kitabımı yayınlayarak tüm bildiklerimi sizlerle paylaşmak istedim. Kendimi Web Tasarım, Grafik Tasarım, Donanım konusunda hâlâ geliştirmekteyim.

Yorum(22)

  1. Selamun Aleykum Ömer kardesim,

    Cok faydali bir bilgi sagolasin Allah kabul etsin bu arada ögretmenler günün kutlu olsun sen bizim de ögretmenimizsin. Hakkini helal et.

    Saygilarimla
    Mehmet

      1. Allah razi olsun sende öyle, Helal olsun tabiiki sende helal et senin hakkin daha cok bizde. Allah sabir versin Ögretmenlik zor is. Okul yetmiyo bide bütün dünyaya bildiklerini ögretmek valla iyiki seni tanimisim iyiki siteni kesfetmisim. Zor anlarimda rehberimsin.Sagolasin

  2. Sayın Bozalan,
    videonun görüntülendiği alana çerçeve (border:5px gibi) koymak ve çerçeveye renk vermek mümkünmü?
    Bir de -allowfullscreen:false- yapılınca video alanındaki çerçeve resmini nasıl kaldırabilirim?

    Teşekkürler.

    İyi çalışmalar.

    1. ufuk eğer bu çalışmayı bir div içine atarsan ve css kodunada border-color verirsen tabiki de çerçeve rengi atayabilirsin.
      Diğer sorunu anlamadım video alanında çerçeve yok ki. Neyden bahsettiğini anlamadım.

  3. Ömer abi öncelikle paylaşımların için çok sağol.Abi bu video galeriyi responsive nasıl yapabilirim acaba yardımcı olabilirmisin?İnternet sitemi % hesabına göre tasarladım ama bu video galeriyi adabte edemiyorum yüzde değer kabul etmiyor abi yardımcı olabilirmisin?

    1. Hasan, Kişisel işlemlerde yardımcı olamıyorum. Sadece anlatımını yaptığım işlemlerde yardımcı olabilirim. Emin ol senin gibi bir çok kişi kendi işine yardımcı olmak için mesaj atıyor. Herkesle uğraşacak malesef zamanım yok. Kusura bakma

  4. Önemli değil abi haklısın ama xml de % hesabı yapılmıyor ne yapmam lazım abi bir iki öneri verirsen ben araştırıp bulurum abi

    1. Hasan arkadaşım, sadece % değeriyle responsive yapılmaz. CSS kodları kullanarak siteyle verdiğim css dosyasını yeniden düzenlemelisin. Siteyi başlı başına responsive yapmak başlı başına bir iş. O yüzden sadece % değeri yerleştirmeyle hiç bir şey yapamazsın.

  5. Hocam bu galeriye sadece flv uzantlılı dosyalar yüklenebiliyor. Ve flv uzantısı video kalitesini çok düşürüyor.Bu galerinin farklı uzantılı videoları oynatabilmesi için nasıl bir yol izlenebilir.Şimdiden teşekkür ederim.

  6. Uzun denemelerim sonunda avc mp4 720p video formatını oynattığını ve bu formatın buldum.Görüntü kalitesi de gayet iyi. Bu formata çevirmek için ilgilenenler format factory programını kullanabilirler.Ömer hocamıza paylaşımından ötürü çok teşekkür ediyorum

  7. oyalanmak için bloggera başladım bi öğrenemedim şu işleri kafayı yicem. bi şey anlamadım keşke kodları yazsaydın içindeki linkleri falan değiştirseydik öyle bişeyler. aslında player aramamdaki sebep ben bi türlü çalışan slayt bulamadım bana lazım olan slaytta scrollbar veya sağ sol oklarının olması. günlerce saatlerdir bakıyorum çoğu çalışmıyo çalışanlar bi garip ayarlanmıyo. bana scrollbarı olan slider lazım düzünü kendimde yapıyorum. bu playerın yanındaki çok güzelmiş o mouse duyarlı ama öyle bişeyler işte bloggerdan soğudum

    1. Merhaba Enis arkadaşım, bu sliderın çalıştığını zaten demodan görüyorsun. Sitemizde alışmayan bir uygulama bulman zor söyliyim. blogger kullanmadığım için bu dosyayı nasıl ekleyeceğini bilmiyorum. Ama bu çalışmayı kullanabilmen için kendine ait bir host’un olması lazım çünkü dosyaları o alana atmadan çalışmayacağı kesin.

  8. malesef indirdiim dosyada yada senin eklediğin demoda boş sayfa açılıyo deneme yapamadım o yüzden yaptığına iyi bir yorum yapmak için içeriği görmemiz gerek değilmi ömer bey

    1. Merhaba, bu yazıyı yazdığımızda chrome Flash desteğini çekmemişti. Büyük ihtimal chrome flash çalıştırmadığı için göremiyorsunuz. İnternet Explorer ve Mozillada denerseniz açılacaktır. İyi günler.

  9. chrome da çalışmassa ziyaretçiler explorer veya mozilla kullanması gerektiğini bilmeyebilir ama

    1. Serdal arkadaşım, bu makale 2014 yılında yazılmış ve o zamanlar çalışıyordu. Bende yeni öğrendim. Her bir makaleyi tekrar tekrar çalışıyor mu diye kontrol etmemiz mümkün değil. Sizin için sorun çözüldüyse indirmeyin. Ben makalenin altına zaten yazacağım. İlginiz için teşekkürler.

    1. Siz yazdıktan sonra denedim Mozilla ve İnternet Explorerda çalışıyor. Bilgisayarınızda yazılımsal bir problem olabilir. İyi günler.

  10. explorerda çalışıyor bende farkettim şimdi yanlız kullanıcalar chrome dan girin ce gorebileceklermi ondan emin olmak istedim sadece

Cevaplayın serdal Yanıtı iptal et

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.