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

Slider Video Galeri Örneği

481
12

Merhaba arkadaşlar web sitelerdeki sliderlar genelde resim içerikli olurlar. Peki orada video oynatmak ister misiniz? Peki nasıl yapacaksınız? Eğer sitene video slider 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 makale 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 programı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 ;

<div style=”position:  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.

<video
videourl=”video/video.flv”
previewimage=”previewimage/preview.jpg”
><b>Video</b><br/> omerbozalan.com</video>

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.

DemoButton

hemen-indir-butonu

(481)

omerbozalan 1981 doğumluyum. Üniversite eğitimimi, Sakarya Ünv. Elektronik ve Bilgisayar Öğretmeni 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ınlarak tüm bildiklerimi sizlerle paylaşmak istedim. Kendimi Web Tasarım, Grafik Tasarım, Donanım konusunda hâlâ geliştirmekteyim.

Yorum(12)

  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

Senin Yorumların

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Sonucu Giriniz * Time limit is exhausted. Please reload CAPTCHA.