Slider Video Galeri Örneği
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.
ÖNEMLİ: Chrome yakın zamanda Flash desteğini çektiği için bu slider sadece Chromeda çalışmamaktadır. Diğer Browserların hepsinde çalışmaktadır.
(1137)
Yorum(22)
Yorum bırakın Yanıtı iptal et
Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.
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
Mehmet kardeşim Allah razı olsun. Çok sağol. Ayrıca çok ince bir insansın. Sende hakkını helal et.
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
Ömer abi okulda xml uzantılı slider ödevım var yardım eder mısın ?
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.
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.
Ö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?
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
Ö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
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.
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.
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
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
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.
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
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.
chrome da çalışmassa ziyaretçiler explorer veya mozilla kullanması gerektiğini bilmeyebilir ama
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.
bu aradda explorer da çalışmıyor
Siz yazdıktan sonra denedim Mozilla ve İnternet Explorerda çalışıyor. Bilgisayarınızda yazılımsal bir problem olabilir. İyi günler.
peki bunun chrome destekleyenini yapazmıyız
explorerda çalışıyor bende farkettim şimdi yanlız kullanıcalar chrome dan girin ce gorebileceklermi ondan emin olmak istedim sadece