Web sitenizin arka planına Html5 formatlarındaki videoları kolay bir şekilde eklemenize yarayan ücretsiz bir uygulama. Web sitenizin açılış süresini biraz zorlayacak olması açısından pek tavsiye etmiyorum ama görselliğe önem verenler için diyeceğim bir şey yok. Bir kaç tane web sitesinde bu tarz arka planda video oynattıklarını görmüştüm. Ortaya gayet güzel bir site görünümü çıkıyor sonuçta. videoBg benzeri arka planda video oynatmaya yarayan çok az örnek var. Şu ana kadar sadece iki tane örneği ile karşılaştım. biri videoBg diğeri de BigVideo.js’dir. videoBg eklentisi sadece Html5 formatlarındaki videoları web sitenizin arka planına eklemenize yarar. Youtube yada başka bir web sitesinden url adresi girerek böyle bir şey yapamıyorsunuz.
Kullanım
Head etiketleri arasına eklenmesi gereken bölümler
Js dosya adresleri :
PHP:
<script type="text/javascript" src="assets/jquery-1.5.1.js"></script>
<script type="text/javascript" src="jquery.videoBG.js"></script>Arkaplanda kullanmak için gerekli olan javascript kod :
PHP:
<script>
$(document).ready(function() {
$('body').videoBG({
position:"fixed",
zIndex:0,
mp4:'assets/christmas_snow.mp4',
ogv:'assets/christmas_snow.ogv',
webm:'assets/christmas_snow.webm',
poster:'assets/christmas_snow.jpg',
opacity:1,
fullscreen:true,
});
})
</script>Css çerçeve arkaplanında kullanmak için gerekli olan javascript kod :
PHP:
<script>
$(document).ready(function() {
$('#div_demo').videoBG({
mp4:'assets/tunnel_animation.mp4',
ogv:'assets/tunnel_animation.ogv',
webm:'assets/tunnel_animation.webm',
poster:'assets/tunnel_animation.jpg',
scale:true,
zIndex:0
});
})
</script>Yazılarda kullanmak için gerekli olan javascript kod :
PHP:
<script>
$(document).ready(function() {
$('#text_replacement_demo').videoBG({
mp4:'assets/text_replacement.mp4',
ogv:'assets/text_replacement.ogv',
webm:'assets/text_replacement.webm',
poster:'assets/text_replacement.png',
textReplacement:true,
width:760,
height:24
});
})
</script>Tüm tarayıcı türlerinde tam ekran video kullanmak için kullanmanız gereken javascript :
PHP:
$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show('http://video-js.zencoder.com/oceans-clip.mp4');
});Arkaplanda video oynatmak için kullanmanı gereken javascript :
PHP:
$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show('http://video-js.zencoder.com/oceans-clip.mp4',{ambient:true});
});Art arda video oynatmak için kullanmanız gereke javascript :
PHP:
$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show(['vid1.mp4','vid2.mp4','vid3.mp4'],{ambient:true});
});
