mintik

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.  Syd Lawrence  tarafından yapılmış olan bu uygulamanın kullanımını anlatmadan önce sizlere Html5 formatlarındaki videolar hakkında biraz bilgi vermek istiyorum.

Bilmiyorsanız bile büyük ihtimal  duymuş olabileceğiniz  bir konu olan Html5 ile birlikte gelen yeni elementler arasında video elementi de bulunuyor. Eskiden web sitemize bir klip yada film eklemek için flash destekli bir video player kullanmamız gerekiyordu sitemizde. Html5’in getirdiği yenilikler sayesinde artık flash tarzı örneklere ihtiyacımız da kalmadı. Herhangi bir klibi yada filmi olduğu gibi web sitemize yükleyip ziyaretçilerimize izlettirebilmek artık mümkün ve html link yada resim eklemek kadar da kolay oldu. Sorun şu ki kendi aralarında bir türlü anlaşmaya varamayıp yaptıkları her adımda web tasarımcıların ve web site sahiplerinin canını sıkan tarayıcılar Css3’teki (küfür etmek istiyorum :D) gibi her değeri bütün tarayıcılara göre tekrar (-webkit-, -o-, -moz-, -ms-) etmemize neden oluyorlar. Css için hadi neyse diyelim de videolar için kelime tekrar etmekten çok can sıkan olay her tarayıcı için ayrı ayrı formatlarda videoları hazırlayıp tek bir videoyu mp4, webm, ogv 3 ayrı formatta kaydetmemiz gerekiyor. Gözünü sevdiğimin Google Chromesi hepsini desteklese de diğerleri bunu yapmamışlar ve üstüne de kendilerine has formatlar oluşturmuşlar.  Video elementi hakkında daha fazla bilgiye buradan ulaşabilirsiniz.

Kullanım

• Head etiketleri arasına eklenmesi gereken bölümler

Js dosya adresleri : 

<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 :

<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 :

<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 :

<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>

 

Hazır arka planda video oynatma başlıklı bir yazı açmışken BigVideo.js uygulamasını da buraya eklersek daha  uygun olur diye düşünüyorum. Bir taşla iki kuş daha iyi bir fikir.

BigVideo.js

Özellik açısından videoBg ile hemen hemen aynı görevi  gören bir örnek. Youtube yada başka bir web sitesi üzerinden deneme fırsatı olmadı ayrıca başka kaynaklardan da kullanılıp kullanılamadığı hakkında bilgi bulamadım. Anlayacağınız yine Html5 formatlarında klipleri oynatmaya yarayan bir çalışma. Klip dediğime bakmayın spam olayına girmesin diye mecburen farklı kelimeler kullanmaya çalışıyorum. Konu ile alakalı anahtar kelimeyi  biraz fazla ekledim diye düşünüyorum.

Tüm tarayıcı  türlerinde  tam ekran video kullanmak için kullanmanız  gereken javascript :

Örnek Demo 

$(function() {
    var BV = new $.BigVideo();
    BV.init();
    BV.show('https://video-js.zencoder.com/oceans-clip.mp4');
});

Arkaplanda  video oynatmak için kullanmanı  gereken javascript :

Örnek demo 

$(function() {
    var BV = new $.BigVideo();
    BV.init();
    BV.show('https://video-js.zencoder.com/oceans-clip.mp4',{ambient:true});
});

Art  arda  video  oynatmak için kullanmanız  gereke javascript :

Örnek demo

$(function() {
    var BV = new $.BigVideo();
    BV.init();
    BV.show(['vid1.mp4','vid2.mp4','vid3.mp4'],{ambient:true});
});