Merhaba Arkadaşlar, size bu sıralar pek çok sitede kullanılan bir çalışmadan bahsedeceğim. Bazı sitelerde web sayfaların arkaplanı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
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 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.
<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>
<script src="js/bigvideo.js"></script>
<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>
Yapılan Çalışmayı İndirmek İçin; http://goo.gl/bVUwI
0 Yorum