Bu dersimizde jquery'nin
vide adlı bir pluginini işleyeceğiz.Vide arkaplana video eklememize yarıyor.Sadece site arkaplanına değil belirlediğimiz her hangi bir objenin arkaplanınada atamamıza yarıyor.Kullanımına geçelim.
İndir : http://ustaderslik.com/dosya/vide.zip
İncele : http://ustaderslik.com/ornek/vide/
Öncelikle sayfamıza jquery ile plugini dahil ediyoruz.Yukarıdaki örneğin içinde mevcut.Ardından css e
html,body{margin: 0;width: 100%;height: 100%;}
yazalım.Bu şekilde video ekrana tam şekilde sığacak.Ardından body tagına şu parametreleri verelim.
data-vide-bg="video/ocean" data-vide-options="loop:true, muted:true,autoplay:true"
Parametreleri açıklayacak olursak
data-vide-bg : Video konumu.örneğin video klasörünün içinde a.mp4 varsa
video/a yazmalıyız.Videonun sorunsuz olması için bu klasöre aynı adla
mp4,ogv,webm uzantılı videoları koymalıyız.
data-vide-options : Burada ise ayarları yapıyoruz.
loop : Sürekli videonun tekrar etmesi için.
muted : Ses açıp kapatmak için.
autoplay : Otomatik başlaması için.
volume : Ses açıp kapatmak için.0-1 arası değer alır.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.vide.js"></script>
<style type="text/css">
html,body{margin: 0;width: 100%;height: 100%;}
</style>
</head>
<body data-vide-bg="video/ocean" data-vide-options="loop:true, muted:true,autoplay:true">
</body>
</html>
UstaDerslik
