Web-Site-Arkaplanında-Video-Oynatma_emresupcinMerhaba arkadaşlar,

Web tasarım kategorisi ile fazla ilgilenmediğimi düşündüm, daha doğrusu blogumla yine fazla ilgilenmemeye başladım. Bunun sebebi de yoğun bir iş temposu olmakla birlikte vakit ayıramamak. Bugün biraz makale paylaşmaya fırsat bulmuşken değerlendirmek istedim. Konumuz ise yaptığınız web sitelerinin arkaplanlarında videonun nasıl oynatıldığı. 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.  (Bigvideo.js ile çalışan arkaplan video işlemi)

 

Örneğin İncelenmesi

 

Aşağıdaki kodlar <head> ile </head> Arasında olmalıdır.

 

1  <link rel="stylesheet" href="css/style.css">
2  <link rel="stylesheet" href="css/bigvideo.css">
3  <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 -->
2   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
    </script>
3  <script>window.jQuery || document.write("<script src="js/jquery-1.7.2.min.js">
      </script>")</script>
4  <script src="js/jquery-ui-1.8.22.custom.min.js"></script>
5  <script src="js/jquery.imagesloaded.min.js"></script>
6  <script src="http://vjs.zencdn.net/c/video.js"></script>

     <!-- BigVideo scripti -->
7   <script src="js/bigvideo.js"></script>

    <!-- Video özellikleri -->
8  <script>
9  $(function() {
10   var BV = new $.BigVideo();
11   BV.init();
12   if (Modernizr.touch) {
13   BV.show("img/background-dock.jpg");
14   } else {
15    BV.show("video/dock.mp4",{ambient:true});
16  }
17    });
18       </script>

Yukarıdaki kırmızı yazıyla yazılmış kısımdaki yer video klasörünün içindeki videonun adıdır. Kendi videonuzu Bu kısma uzantısıyla birlikte koymanız gerekmektedir. Sonrasında web sitenizin arka planında video 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.

 

Alıntıdır…

Yazar
Yazar
Bilgisayar Programcısı, Web Tasarımcı, Üniversite Öğrencisi...
Twitter Facebook Google Linkedin Flickr YouTube

Önceki Yazı:Twitter’da Şok! Çoğu Kullanıcının Hesabı Askıya Alındı!

Sonraki Yazı:Tasarımcı Olmak mı İstiyorsunuz? Pekii Nereden Başlayacaksınız?

YORUMLAR

Bu yazıya 1 yorum yapılmış.

  1. Yazar
    Uğur YÜCEL

    Teşekkürler

SİZ DE CEVAP YAZABİLİRSİNİZ
Bu yazı hakkında görüşünüzü belirtin.

ES Web Tasarım Web Tasarım Blog Teması Emre Supçin Bu tema ES Web Tasarım tarafından düzenlenmiştir. Hiçbir şekilde kopyalanamaz.