Web Site Arkaplanında Video Oynatmak
Merhaba Arkadaşlar, size bu sıralar pek çok sitede kullanılan bir çalışmadan bahsedeceğim. Bazı sitelerde web sayfaların arka planında ekranı kaplayan videolar bulunmakta ve bunun üzerinde ise site inşaa edilmektedir. Yani arka planda video oynatılırken sitenin diğer materyalleri ( butonlar, resimler, yazılar vs.) bu videonun üzerinde bulunmaktadır. İşte bugün bu konudan sizlere bahsedeceğim. İnşallah beğenirsiniz. (Bigvideo.js ile çalışan arkaplan video işlemi)
Size kendi yapmış olduğum çalışmanın indirme linkini vereceğim, çünkü çalışan dosyanın sizde örnek olarak durmasında yarar var. Ona bakarak kendi web sitenizin arka planına video koyabilirsiniz. Ama bazı şeyleri de burada anlatarak sizlere yol göstermek istiyorum. Dikkatlice okursanız hiçbir sorun olmayacaktır.
Örneğin İncelenmesi.
Aşağıdaki kodlar <head> ile </head> Arasında olmalıdır.
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/bigvideo.css"> <script src="js/modernizr-2.5.3.min.js">
<body> ve </body> arasında yer vereceğiniz şeyler tamamen videonun üzerinde olacağından istediğiniz gibi sitenizi yapabilirsiniz. Kısacası burada video ile ilgili hiçbir şey yoktur. Sadece sitenizi divlerle veya tablolarla oluşturdurktan sonra onların en altına aşağıdaki kodları yerleştirmeniz gerekmektedir.
<!– BigVideo ile çalışan scriptler –>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script> <script src="js/jquery-ui-1.8.22.custom.min.js"></script> <script src="js/jquery.imagesloaded.min.js"></script> <script src="http://vjs.zencdn.net/c/video.js"></script>
<!– BigVideo scripti –>
<script src="js/bigvideo.js"></script>
<!– Video özellikleri –>
<script>
$(function() {
var BV = new $.BigVideo();
BV.init();
if (Modernizr.touch) {
BV.show('img/background-dock.jpg');
} else {
BV.show('vids/dock.mp4',{ambient:true});
}
});
</script>
Yukarıdaki kırmızı yazıyla yazılmış kısımdaki yer vids klasörünün içinde ki videonun adıdır. Kendi videonuzu Bu kısma uzantısıyla birlikte koymanız gerekmektedir. Sonrasında web sitenizin arka planında vids klasörünün içinde olan video arka planda oynatılacaktır.
Bu çalışmayla birlikte artık web sitenizin arkasında videolarınızı istediğiniz gibi oynatabileceksiniz. Kolay gelsin. Sorularınız olduğuna yorum kısmında bana ulaşabilirsiniz.
(1599)
Yorum(89)
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.
Teşekkürler güzel bir paylaşım olmuş.
Abi bana ulaşirmısın lütfen skype adres : speakcoll.ll
Merhaba, web tasarım ile alakalı bilgisi olmayan biriydim. Anlaşılabilir yazılarınız sayesinde ihtiyacım olan websitesini yapabilmenin yolunu öğrendim bu sebepten ötürü teşekkür etmek istiyorum. Yaklaşık dört gündür html kod yazarak background a video eklemek ile uğraşıyorum sitenizde olan taslak üzerinden videolarımı düzenledim birkaçı 60mgbyte ın üzerinde olduğundan mı bilemiyorum ogv ve webm olmadı VLC player dan dönüştürerek yapmıştım bir tanesini yaptım ve siteye ekledim. Sorum ise sizde ki örnekte olan background videonun üzerinde yazılar mevcut yanlız benim yazılarım videonun altında kalıyor, videonun üzerine yazı gelebildiği taktirde acordion menu örneğinizde ki taslak ile birleştirebilir miyim çalışmamı aratırdım birçok sitede gördüm loading seçenekleri var türlü türlü bunu nasıl yapabilirim?
Tekrar teşekkür ederim iyi çalışmalar
Admin bende aynı Şekilde denedim videonun altında kaldı yazılar napmam lazım duzeltmek icin saol
Arkadaşlar size verdiğim dosya nasıl çalışıyor 🙂 Kesin bişeylerde yanlışlık yapıyorsunuz. Daha iyi incelemenizi tavsiye ederim
Hocam Ben Videoyu yükledim Arka Plana Çokta güzel Bir şekilde Geldi Fakat site açıldığında arka plan çok yavaş geliyo bunu nasıl çözebilirim.
Sercan arkadaşım arka planda videoların süresinin uzun olması sitenin gecikmesini sağlar. Bunun için videoyu kısa tutmalısın. Belki sunucunuzdan da kaynaklanıyor olabilir. Kolay gelsin.
yazılar altda kalıyorsa css kullanmalısın bir tane tablo yada div koyun o dive css komutu olarak : .{position:relative;}kullandığın yerler videonun üzerinde olacaktır.
Videonun üzerine gelecek için id oluştur id de z-index ver ve position absolute ver ben yaptım oldu yanlız 5 adet sunucuda çalışmasına rağmen müşterimin sunucusunda çalışmadı 🙂
Fevzi bazen beklemek iyidir. 🙂 Biraz bekle sunucuda görüntülenir herhalde:)
Videoyu o kadar büyüt tutmamalısın sonuçta web sitesi olacak internete attığından video yüklenene kadar beklemek zorunda kalacaktır. Tabi biz burda çalışma dosyasını size veriyoruz gerisi sizin düzenlemenize kalıyor. burda indirdiğiniz dosyadaki uzantıyı deneyin. Web sitenizde çalışması gerekli.
Merhaba bir önce ki mesajıma dönüş yaptıgınız için tesekkur ederım. Yine sormak istediğim üzerinde çalıtığım background videlu bir site internette araştırma yaparken bir flash menu buldum ona ekledim ancak bu sefer arkaplanda ki video ufaldı problem ne olabilir teşekkürler
Mert video ile eklediğin flash menü bağımsızdır. Flash menü kullanmamanı tavsiye ederim.
Bazen video buyuk cıkıyor ancak cogu zaman ufak sag kosede sanırım kullanmamam gerek tavsıyelerını dıkkate alacagım cok tesekkur ederım
iyi günler öncelile yararlı bilgileri bizlerle paylaştıgınız için teşekkürler. size bi sorum olacaktı web sitesinin arkaplanına video ekledigimde videonun açılması local da 1.5 dk filan buluyo normal birşeymidir bu. acaba
samet arkadaşım videonun açılması 15 dk falan sürmemesi lazım. Zaten arkaya uzun bir video koymamalısınız . Dk boyutlarında değilde saniyeler boyutlarında videoyu yerleştiriniz.
ömer abi bir şey soracamda sitemizin arkaplanında slayt gösterisi olan bir çalışma nız varmı ? varsa onuda bu örnekteki gibi anlatırsanız çok sevinirim.(slayt arkada kendi kendine geçsin)
öyle bir çalışma elimde mevcut mail ile ulaşırsan sana yardımcı olabilirim arkadaşım.
rıdvan kardeşim, bana böyle bir çalışma lazım oldu. arkaplan slayt olacak şekilde. bu konuda bana da yardımcı olabilir misin? yukseleroll@gmail.com
bu konuyla ilgisi yok ama sorumu yine sorayım dedim.Ben
css ile açılır menü tasarladım yalnız üstüne gelince açılan menüler sliderimin arkasında kalıyor görünmüyor yardım edebilrseniz sevinirim
ömer bey tasarım konusunda amatör olarak ilgileniyorum ve bir iş nsip oldu bir sitenin hemen hemen aynısını istedi herşeyi yaptım fakat arkaplanı üç beş saniyede değişen bir js var ama bir türlü beceremedim.yardımcı olurmusunuz.js arkaplan olarak nasıl ekleniyor
merhaba arkaya konulan videonun sesi çıkmıyor? bunu nasıl düzeltiriz.
sesi videodan ayırarak arkaplan ses ekleme kodlarıyla sesi koyabilirsiniz.
Bu sorunun çözümü için bigvideo.js dosyasını açın… 192. satırda player.volume(0); … ‘0’ ibaresini 1 olarak değiştirin!
uygulamayı yapmamıza rağmen sadece arka plan siyah olarak gelmektedir.
merhabalar, bilgi için teşekkür ederim. sormak istediğim arka plandaki video herhangi bir browserdan izlenebiliyor fakat cep telefonundan (iphone) video izlenmiyor acaba bildiğiniz bir yol var mı?
Teşekkür ederim.
Eser arkadaşım uygulama cep telefonlarından izlenemiyor malesef. Simdilik bu şekilde idare edeceksiniz.
IE ‘de neden çalışmaz
Serkan arkadaşım IE de çaçışıyor. Yeni versiyonları yükleyin artık arkadaşlar. IE 9 da çalışıyor bu uygulama. nerden çıkartıyorsunuz anlamadım.
4dk lık bir video ekkliyorum siteyi açtığımda geç geliyor arka plandada ses ekliyorum ama ses videodan önce başlıyor ben ikisinin de aynı anda başlamasını istiyorum arkadaki video bir şarkı klibi .
Onu bey, bağlantıdan kaynaklanan sorunlar bunlar. ses görüntüden önce gelir genelde. Ama bağlantı ayarları iyi olursa sorun olmaz. Bizlik bir durum yok onu bey
bu scriptin arkasında siyah background çıkıyor yüklenirken onu kaldıramadım. yardımcı olabilirmisiniz
Orhan bey, tam olarak istenilen işlemleri yapamadığınız için siyah ekranla karşılaşıyorsunuz. video ismine uzantısına çok dikkat etmelisiniz. Bendeki videodaki ismi kullanabilirsiniz. Birde format çok önemlidir. Herşeyiyle benim örnekle uyuşturmaya çalışınız.
Merhaba arkadaşlar. Bu video çalışmasının demosunu indirdim bütün tarayıcılarda denedim çalıştı. Daha sonra bu çalışmayı kendi projeme uyarladım . Ancak bu sefer internet explorer da çalışmadı. Bu sorunla alakalı yardımcı olabilir misiniz ?
denemek ıcın klasoru ındırdım ama sanırsam eksın bır klasor var anlayamadım
video.js scriptini bualamıyor dreamweaverde actıgımda baglamıs oldugunuz videa.js scriptini uzaktanmı cekıyor acaba site linkni vermıssınızde rda
erdem arkadaşım senin bilgisayarda sorun var herhalde zaten demoda gördüğünüz çalışma indirdiğinizle aynıdır.
hocam öncelikle teşekkürler, çok güzel bir intro yaptım yalnız videonun sadece 1 kere oynamasını ondan sonra sabit kalmasını istiyorum. Bu mümkünmü acaba yardımcı olursanız sevinirim.
İrfanbey beğendiğinize sevindim diğer sorunu hakkında ise malesef bilgim yoktur.
Ömer Bey, öncelikle paylaşımınız için teşekkürler. Kaynağın olduğu klasörü indirip istediğim değişiklikleri yaptım local de çalışıyor problemsiz bir şekilde ama hosta attığım zaman siyah background çıkıyo ve video açılmıyor problem ne olabilir acaba? host aldığım yer ile alakalı olabilirmi?
Orhan Bey, yapmış olduğunuz değişiklikler yüzünden olabilir. Videonuzun boyutundan da kaynaklanıyor olabilir. Biraz beklemenizde fayda vardır. Diğer türlü hostta bir sorun olabilir mi? sanmıyorum.
ancak local de hiç bir sıkıntı yaratmadan çalışıyor 10dk oldu hala bekliyorum 🙂 bu kadar uzun sürermi videodanmı acaba dedim sizin örnekte yolladığınız videoyu kullandım yine aynı sonuç oluyor
orhan, senin gibi 1-2 kişide daha aynı sorun oldu. Zaten mesajlarda da anlayabilirsin. ben her arkadaş söylediğinde inceledim. Ama hiçbir sorun yoktu. Malesef yapabileceğim birşey yok. Tekrar kontrol ediniz.
Ömer Bey, host ile alakalı bir problemmiş düzeltti firma mp4 uzantılı dosya kullandığım için problem çıkıyormuş host ayarlarını yapmam gerekiyormuş firma kendi yaptı ve problem çözüldü aynı sorunu yaşayan arkadaşlar olursa bilgilerine…
İlginize çok teşekkürler.
Orhan bey, :)Şaka gibi. nasıl bir host firmasıdır. Bence direk ordan ayrılın. Yoksa çok sıkıntı yaşarsınız.
ewet kesin değiştirmem gerek video geldi şimdi slider ve menü kayboldu farklı bi yapıları var sanırım 🙁 tam bir günümü harcadılar ve hala da harcıyorlar… 🙁
Kullandığınız hosting yapısı windows tabanlı ise ayar yapmak gereklidir, linux ise php kütüphanesinden çekmektedir. Hosting firması size yardımcı olmuş bu konuda şikayet yerine teşekkür etmelisiniz.
hallettim teşekkürler
merhaba hocam,
benim sitemde reklam alanları bölümünde ayrıca Css Tanımlama ve Javascript Kodu Ekleme ve Pskin Background Reklam Alanı alanı mevcut buraya nasıl tan ekran video ekleybilirim.
—————
Css Tanımlama
Burada ekleyeceğiniz css kodunuz style.css dosyasına gerek kalmadan ayarlayabilirsiniz. Sadece css kodu ekleyin otomatik eklenir.
—————————–
Javascript Kodu Ekleme
Bu alana javascript kodlarını ekleyebilirsiniz. Başına <script type= ve bu kodları eklemenize gerek yok, otomatik eklenir.
—————————–
Pskin Background Reklam Alanı
Arka zeminde görünecek reklam kodunu giriniz
————————–
gibi kod kısınları var.
İbrahim arkadaşım hiçbir şey anlamadım malesef. Kusura bakma.
Merhaba paylaşmış olduğunuz scripti kullandım süper herşey çok güzel ellerinize sağlık fakat ses çıkmıyor bunu nasıl çözebilirim yardımcı olabilirseniz çok sevinirim.
Video formatıyla alakalı olabilir. Diğer video formatlarını denemelisiniz. Olmuyorsa sesi ayrı olarak arka planda kodu olarak çalıştırmayı deneyin.
Çok güzel bir paylaşım teşekkürler.
Benim bir sorum olacaktı bunu sadece arka planda mı oynatabiliyoruz belirli bir div arasına alınamıyor mu
Nazlı hanım hiç denemedim. Oluyorsa bize de bildirirseniz seviniriz. Kolay gelsin.
Merhaba,
Daha 2 gun once bu html kod yazilimi hakkinda ogrenmeye basladim.Sizin soylemis oldugunuz herseyi yapmama karsin,bende video oynatmadi
html kod tarafinda sadece bu karaterler cikti ‘)
Birde bu yukledigimiz dosyayi nasil koda bagliyoruz onu cozemedim.
Sorum umarim sacma gelmemistir.:))
Okan arkadaşım, html kod yapısıyla başlamışsın. Konunun en başındasın yani. Kısacası buradan anlatarak sana yön vermem mümkün değil. Eğer html’yi iyi bilmiş olsan daha farklı noktalarda konuşuyor olabilirdik. Dosyalarını da göremediğimden hatalarını da bilmiyorum. Tek bir hata yapılsa yine birşeyler söyleyeceğim ama senin yaptıklarında hep hata var. 🙂 kusura bakma.
Kerem arkadaşım, kişisel işler için malesef yardım etmiyoruz ki istediğiniz yardım geniş çaplı bir yardımdır. Kısacası sitenin tamamını yapın diyorsunuz. Kusura bakmayın… Sitemiz bu işler için değil aksine anlatımı yapılmış konularda yardım etme amacı gütmektedir.
emeginize saglik cok güzel. dediginiz sekilde herseyi yaptim fakat . sizin videolariniz cok ufak bi sekilde kaliyor kutu gibi. kendim 1.30 dk lik 1080p video koyuyorum soyle bi sıkıntı oluyor saga kayıyor sol taraf siyah kaliyor. neden olabilir sizce. linklere bakabilirsiniz sorunu resime aldim.
İsmail arkadaşım css dosyalarını siteye eklemelisin. Benim tasarım üzerinden siteni yapmanda fayda var. Diğer türlü css dosyalarını kontrol edip kendi css sayfana eklemelisin.
hocam easy builder ile yapılmıs bie web sitem var orayada bu işlemi uygulayabiliyomuyz
Yakup arkadaşım kodlarına erişebildiğin tüm sitelere uygulayabilirsin. Kolay gelsin.
hocam siteme kaydırma cubugu ekleyemedim bir türlü nette hazır kodu varmı yardımcı olursanız memnun olcam
Yakup, Sitenin yüksekliği fazla olursa zaten otomatik olarak kaydırma çubuğu oluşuyor. Kendin kaydırma çubuğu yapmana gerek yok.
Bu şekilde hazırlanmış bir sitede arkaplandaki videoyu durdurma veya en azından sessize almak için bir buton ilave edilebilir mi?
Cevap için şimdiden teşekkürler
İlker arkadaşım tabiki sesi azaltma kapatma tuşları ekleyebilirsin. Aşağıdaki linkten ekleme yapabilirsin.
LİNK TIKLA
ömer bey ben bu işlerde yeniyim arkaplanda video yürütmek istiyorum fakat bunu hazır tema kullanarak yapmak istiyorum.hazır temamın üstünde ne gibi değişikilikler yapmalıyım. Paylaştığınız dosyadaki css dosyalarını temanın css dosyasına attım videonun ismini de sizinkiyle aynı yaptım fakat yine de olmadı. yardımcı olursanız sevinirim teşekkürler 🙂
Rojbahar arkadaşım yukarıdakki makalede her şey ayrıntısıyla anlatılmıştır.Lakin yukarıdaki kodları sayfanıza kopyalayıp yapıştırmayın. Dosyayı indirip buradan bakarak o dosyadaki yerden kopyala yapıştır yaparsan sonuca ulaşırsın. Buradan kopyala yapıştır yaparsan karakterkerde sorun yaşayabilirsin.
ömer kardeşim; bu kodların serverda çalışması için server’in herhangi bir özelliği olması gerekir mi? ben senin dosyalarını içeriğini hiç değiştirmeden test etmek server a yükledim. yazılar çıkıyor ancak background siyah. video görünmüyor. sebebi ne ola?
Yüksel arkadaşım ilk önce benim demo çalışmayı indirip dene çalışıyorsa, kendi yaptığına uygulamaya çalış. Eğer benim verdiğim demo olduğu gibi çalışıyorsa, senin çalışmanda sorun olabilir.
HTML 5 ve bootstrap ile hazırlanmış bir sitede anasayfada arka plan olarak video olmasina rağmen kendi serverima yüklediğimde çalışmıyor, ama orjinal yerdeki demo sitenin video yolunu girdiğimde çalışıyor. Sorun ne olabilir? Sunucumda bir ayar mı yapmam gerekiyor yoksa Windows sunucuda çalışmıyor mu?
Doğan arkadaşım demoyu indirip kendi bilgisayarınızda çalıştığını gördünüz mü? Wİndows veya linux sunucu farkı böyle şeylerde olmaz. Demo linkini gönderin. Video yolunda hata vardır, bana göre…
Merhaba Omer bey benim Proje ode vim web tasarim dream weaver cs6 trial version kullandim benim bilgisayar da video ve resimleri aciyorum fakat hocaya vermek icin flash bellek attim diger bilgisayar lard a acilmiyor neden olabilir acaba yardimci olursaniz sevinirim
Hocam merhaba. Bir kaç sorumu cevaplandırırsanız, sevinirim!
1. Dreamweaver programında sıfırdan bir wordpress teması yapmak mümkünmü acaba?
2. Netten bedava bir wordpress teması indirip onu kendi zevkime göre tasarlaya bilirmiyim?
Param kısıtlı olduğu için bazı şeyleri kendim yapmak zorundayım. Yardım ederseniz sevinirim
Hafız arkadaşım, Dreamweaver prg. ile web tasarımla ilgili her şeyi yapabilirsiniz. PHP,asp, javascript kısacası her şey. Lakin asp veya php dillerini bilmelisin. WordPress zaten bedava bir web yazılım uygulamasıdır. İnternette ücretli veya ücretsiz temaları bulunmaktadır. Bazı şeyleri kendin yapmak istiyorum diyorsun ama bu işler sandığın kadar basit değil. Öncelikle temel bazı kavramları öğrenmelisin. Bence sıfırdan wordpress öğrenmek için youtube de ki videolardan yararlanmalısın. Kolay gelsin.
Hocam Bende hazır bir index var ve bu indexde arkada backslide var onu kaldirip videoyu koyamıyorum yada kaldırırken hata yapıyorum yani backgrounda bişey değiştiremiyorum bir yardımcı olsan
Hocam biraz ilerleme kaydettim lakin video başlayınca eklediğim logolar görseller coundownt vesayre kayboluyor yani üste video geliyor suanki sorunum bu
Emre arkadaşım tahminime Tablolarını düzenlemen gerekmektedir. Site içi yerleşim konuları olan div veya table konularında kendini geliştirmelisin.
Hocam şimdi şöyle birşeyde var sizin paylaştiğiniz index de ekliyorum bir kaç resim logo icon en basta video başlamadan siyah bir ekran geliyor orada görünüyor lakin video başladığında video üste geliyor yani altında kaliyor benim eklediklerim dreamwieverden de olmadı notepad den text olarak da yapamadım yardımcı olursanız sevinirim
emre arkadaşım benim verdiğim dosyanın içinde style dosyası var. Onu düzenlemen gerekiyor. Çünkü oradaki kodlar senin style dosyanı etkiliyor. Durum bundan ibaret.
hocam benim sitem php olduğu için head body falan göremiyorum nasıl ekleyebilirim.
Yigit arkadaşım php sitelerde de head alanları olur. Php olması head alanlarının olmayacağı anlamına gelmez. default.php sayfasına veya sitenin anasayfasına bakmanı tavsiye ederim.
Selam Ömer kardeşim bu paylaşım çok güzel olmuş. Dosyayı indirdim fakat demo ile farklı sanırım. Çünkü demo sorunsuz oynarken indirdiğim dosyadan açıyorum siyah bir ekran ve bei satır yazı çıkıyor sadece! bu neden olabilir?
Mustafa arakdaşım, Paylaştığımız her şey demo ile aynıdır. Bilgisayarına indirdiğin için olma ihtimali yüksek. İnternet ortamında yayınladığında sorun kalmayacaktır.
Windows Sunucularda bazen mime tiplerine video/mpeg .mp4 eklenmediği için video oynamıyor. IIS ayarından bunu eklerseniz çalışır.
İyi günler hocam. Wordpres ile yaptığımız web sitesinde bu kodu nereye koyacağız acaba? Yardımcı olursanız sevinirim. Teşekkürler. İyi çalışmalar dilerim
Merhaba Ömer bey;
Ben ana sayfada başarılı bir şekilde video ekledim ama bunu bir plugin sayesinde yaptım , sorunum diger tüm sayfalarda da video gözükme sorunu var benim istedigim diger sayfalarda gözükmesin istiyorum yalnızca ana sayfada video gözüksün istiyorum.
Yardımınız için şimdiden teşekkür ederim..
Merhaba Ömer bey;
Bir siteden template indirdim. Arka planda video oynatıyor, fakatr masa üstü bilgisayarda. Telefonda video gelmiyor. Lütfen yardımcı olurmusunuz sebebi neden?
üstadım başka sitelerdeki templatelere yardımcı olma gibi bir durumum yok. sebebine gelince bilmediğim tasarımları incelemeye kalksam çok vaktimi alacağını düşünüyorum. Madem cevap yazdım, indirdiğin temayı satın aldığın bir hosta atıp dene yada ücretsiz host alıp orda çalıştırmayı dene, çünkü bazı temalardaki scriptler bilgisayarda çalışmıyorlar. Kolay gelsin.
Bu kodlarla üretilecek web sayfası mobil uyumlu mu? Yani cepte video çalışıyor mu bu kodlarla. Teşekkür ederim.
Demo çalışmayı telefondan tıklarsanız çalışıp çalışmadığını görebilirsiniz. Bazı scriptleri telefonlar desteklemediği için çalışmamaktadır.