astropaykartsatis.net
User Tag List

Yeni Konu Aç Cevap Yaz
31.07.2011, 11:09 1 (permalink)
XfaCtoR
  • Üyelik Tarihi10.11.2010
  • Ticaret Sayısı0
  • Mesajlar76
Background Video (Javascript) #permalink (permalink)
Merhabalar,

Başlıkta söylediğim gibi Background Video (Javascript) Aslında bunların jQuery scripti var. Bir kaç tane görmüştüm. (mb) YTPlayer, Github gibi.

Örnek olarak küçük birşey yapalım. jQuery gerek duymadan, öncelikle index.html'i paylaşalım.

Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>@osman - kişisel site</title>
<script src="swfobject.js" type="text/javascript"></script>
<style type="text/css"> 
body, td, th { font-size: 45px; overflow: hidden; font-family: "century gothic",sans-serif; text-transform: lowercase; margin: 0px; color: #fff; background-color:#000; }
#content { position:absolute; width:%96; height:%96; z-index:3; left:20px; top:10px; }
#smooth { position:absolute; width:100%; height:100%; z-index:2; background: url(blank.gif); }
a{padding:3px;color:#000;text-decoration:none;background:#fff;cursor:pointer;}
a:hover,a.hover{color:#fff;text-decoration:none;background:#000;}
div{line-height:100px;}
</style>
</head>
 
<body>
<div id="smooth">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div id="content">
 
<a href="http://osman.khazadum.com" target="_blank">kişisel blog</a>
<a href="http://www.facebook.com/adsoyad">Facebook</a>
<a href="http://www.twitter.com/adsoyad">Twitter</a>
 
</div>
 
<div id="container" style="position: absolute; left: -10%; width: 112%; height: 100%;">
<embed type="application/x-shockwave-flash" src="/player.swf" width="100%" height="100%" style="undefined" id="ply" name="ply" bgcolor="#000" quality="high" allowfullscreen="true" allowscriptaccess="always" wmode="opaque" scale="noborder" align="lt" flashvars="autostart=true&amp;stretching=fill&amp;controlbar=none&amp;icons=none&amp;file=durma.flv"></div>
 
<script type="text/javascript"> 
	var s1 = new SWFObject("player.swf","ply","100%","100%","9","#000");
	s1.addParam("allowfullscreen","true");
	s1.addParam("allowscriptaccess","always");
	s1.addParam("wmode","opaque");
	s1.addParam("scale","noborder");
	s1.addParam("align","lt");
	s1.addParam("flashvars","autostart=true&amp;stretching=fill&amp;controlbar=none&amp;icons=none&amp;file=durma.flv");
	s1.write("container");
</script>
 
</body>
</html>
Kodlara baktığımızda, bir tane swfobject.js dosyasına ihtiyacımız var. Onuda paylaşalım.

PHP- Kodu:
/** 
 * SWFObject v1.5: Flash Player detection and embed - http://blog.deconcept.com/swfobject/ 
 * 
 * SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License: 
 * http://www.opensource.org/licenses/mit-license.php 
 * 
 */ 
if(typeof deconcept=="undefined"){var deconcept=new Object();}if(typeof deconcept.util=="undefined"){deconcept.util=new Object();}if(typeof deconcept.SWFObjectUtil=="undefined"){deconcept.SWFObjectUtil=new Object();}deconcept.SWFObject=function(_1,id,w,h,_5,c,_7,_8,_9,_a){if(!document.getElementById){return;}this.DETECT_KEY=_a?_a:"detectflash";this.skipDetect=deconcept.util.getRequestParameter(this.DETECT_KEY);this.params=new Object();this.variables=new Object();this.attributes=new Array();if(_1){this.setAttribute("swf",_1);}if(id){this.setAttribute("id",id);}if(w){this.setAttribute("width",w);}if(h){this.setAttribute("height",h);}if(_5){this.setAttribute("version",new deconcept.PlayerVersion(_5.toString().split(".")));}this.installedVer=deconcept.SWFObjectUtil.getPlayerVersion();if(!window.opera&&document.all&&this.installedVer.major>7){deconcept.SWFObject.doPrepUnload=true;}if(c){this.addParam("bgcolor",c);}var q=_7?_7:"high";this.addParam("quality",q);this.setAttribute("useExpressInstall",false);this.setAttribute("doExpressInstall",false);var _c=(_8)?_8:window.location;this.setAttribute("xiRedirectUrl",_c);this.setAttribute("redirectUrl","");if(_9){this.setAttribute("redirectUrl",_9);}};deconcept.SWFObject.prototype={useExpressInstall:function(_d){this.xiSWFPath=!_d?"expressinstall.swf":_d;this.setAttribute("useExpressInstall",true);},setAttribute:function(_e,_f){this.attributes[_e]=_f;},getAttribute:function(_10){return this.attributes[_10];},addParam:function(_11,_12){this.params[_11]=_12;},getParams:function(){return this.params;},addVariable:function(_13,_14){this.variables[_13]=_14;},getVariable:function(_15){return this.variables[_15];},getVariables:function(){return this.variables;},getVariablePairs:function(){var _16=new Array();var key;var _18=this.getVariables();for(key in _18){_16[_16.length]=key+"="+_18[key];}return _16;},getSWFHTML:function(){var _19="";if(navigator.plugins&&navigator.mimeTypes&&navigator.mimeTypes.length){if(this.getAttribute("doExpressInstall")){this.addVariable("MMplayerType","PlugIn");this.setAttribute("swf",this.xiSWFPath);}_19="<embed type=\"application/x-shockwave-flash\" src=\""+this.getAttribute("swf")+"\" width=\""+this.getAttribute("width")+"\" height=\""+this.getAttribute("height")+"\" style=\""+this.getAttribute("style")+"\"";_19+=" id=\""+this.getAttribute("id")+"\" name=\""+this.getAttribute("id")+"\" ";var _1a=this.getParams();for(var key in _1a){_19+=[key]+"=\""+_1a[key]+"\" ";}var _1c=this.getVariablePairs().join("&");if(_1c.length>0){_19+="flashvars=\""+_1c+"\"";}_19+="/>";}else{if(this.getAttribute("doExpressInstall")){this.addVariable("MMplayerType","ActiveX");this.setAttribute("swf",this.xiSWFPath);}_19="<object id=\""+this.getAttribute("id")+"\" classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" width=\""+this.getAttribute("width")+"\" height=\""+this.getAttribute("height")+"\" style=\""+this.getAttribute("style")+"\">";_19+="<param name=\"movie\" value=\""+this.getAttribute("swf")+"\" />";var _1d=this.getParams();for(var key in _1d){_19+="<param name=\""+key+"\" value=\""+_1d[key]+"\" />";}var _1f=this.getVariablePairs().join("&");if(_1f.length>0){_19+="<param name=\"flashvars\" value=\""+_1f+"\" />";}_19+="</object>";}return _19;},write:function(_20){if(this.getAttribute("useExpressInstall")){var _21=new deconcept.PlayerVersion([6,0,65]);if(this.installedVer.versionIsValid(_21)&&!this.installedVer.versionIsValid(this.getAttribute("version"))){this.setAttribute("doExpressInstall",true);this.addVariable("MMredirectURL",escape(this.getAttribute("xiRedirectUrl")));document.title=document.title.slice(0,47)+" - Flash Player Installation";this.addVariable("MMdoctitle",document.title);}}if(this.skipDetect||this.getAttribute("doExpressInstall")||this.installedVer.versionIsValid(this.getAttribute("version"))){var n=(typeof _20=="string")?document.getElementById(_20):_20;n.innerHTML=this.getSWFHTML();return true;}else{if(this.getAttribute("redirectUrl")!=""){document.location.replace(this.getAttribute("redirectUrl"));}}return false;}};deconcept.SWFObjectUtil.getPlayerVersion=function(){var _23=new deconcept.PlayerVersion([0,0,0]);if(navigator.plugins&&navigator.mimeTypes.length){var x=navigator.plugins["Shockwave Flash"];if(x&&x.description){_23=new deconcept.PlayerVersion(x.description.replace(/([a-zA-Z]|s)+/,"").replace(/(s+r|s+b[0-9]+)/,".").split("."));}}else{if(navigator.userAgent&&navigator.userAgent.indexOf("Windows CE")>=0){var axo=1;var _26=3;while(axo){try{_26++;axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash."+_26);_23=new deconcept.PlayerVersion([_26,0,0]);}catch(e){axo=null;}}}else{try{var axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");}catch(e){try{var axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");_23=new deconcept.PlayerVersion([6,0,21]);axo.AllowScriptAccess="always";}catch(e){if(_23.major==6){return _23;}}try{axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash");}catch(e){}}if(axo!=null){_23=new deconcept.PlayerVersion(axo.GetVariable("$version").split(" ")[1].split(","));}}}return _23;};deconcept.PlayerVersion=function(_29){this.major=_29[0]!=null?parseInt(_29[0]):0;this.minor=_29[1]!=null?parseInt(_29[1]):0;this.rev=_29[2]!=null?parseInt(_29[2]):0;};deconcept.PlayerVersion.prototype.versionIsValid=function(fv){if(this.major<fv.major){return false;}if(this.major>fv.major){return true;}if(this.minor<fv.minor){return false;}if(this.minor>fv.minor){return true;}if(this.rev<fv.rev){return false;}return true;};deconcept.util={getRequestParameter:function(_2b){var q=document.location.search||document.location.hash;if(_2b==null){return q;}if(q){var _2d=q.substring(1).split("&");for(var i=0;i<_2d.length;i++){if(_2d[i].substring(0,_2d[i].indexOf("="))==_2b){return _2d[i].substring((_2d[i].indexOf("=")+1));}}}return "";}};deconcept.SWFObjectUtil.cleanupSWFs=function(){var _2f=document.getElementsByTagName("OBJECT");for(var i=_2f.length-1;i>=0;i--){_2f[i].style.display="none";for(var x in _2f[i]){if(typeof _2f[i][x]=="function"){_2f[i][x]=function(){};}}}};if(deconcept.SWFObject.doPrepUnload){if(!deconcept.unloadSet){deconcept.SWFObjectUtil.prepUnload=function(){__flash_unloadHandler=function(){};__flash_savedUnloadHandler=function(){};window.attachEvent("onunload",deconcept.SWFObjectUtil.cleanupSWFs);};window.attachEvent("onbeforeunload",deconcept.SWFObjectUtil.prepUnload);deconcept.unloadSet=true;}}if(!document.getElementById&&document.all){document.getElementById=function(id){return document.all[id];};}var getQueryParamValue=deconcept.util.getRequestParameter;var FlashObject=deconcept.SWFObject;var SWFObject=deconcept.SWFObject
Şimdi bize blank.gif dosyası lazım. CSS'mizde gördüğünüz gibi öyle bir background resmi var. Bu videonuzun televizyon ekranındaki gibi kare görünmesini sağlayacaktır.

blank.gif indir

Son olarak flv videomuzu oynatabilmek için player.swf dosyası lazım.

Player.swf indir

Bunları kaydetmek için Farklı Kaydet seçeneğini kullanabilirsiniz.

Buraya kadar yapılan herşey eksiksiz tamamlandı. Şimdi yapmamız gereken önemli 2 şey var. Facebook, twitter ve blog adresleri,
embedimizin içindeki şu satır;
PHP- Kodu:
flashvars="autostart=true&amp;stretching=fill&amp;controlbar=none&amp;icons=none&amp;file=ask.flv" 
ve çağırdığımız javascriptimizdeki şu satır; (index.html'in altındaki javascript kodları)

PHP- Kodu:
s1.addParam("flashvars","autostart=true&amp;stretching=fill&amp;controlbar=none&amp;icons=none&amp;file=ask.flv"); 
burada sizlerin değiştirmesi gerek şey durma.flv, yani videomuzun uzantısıdır. Videoumuzun flv olmasına dikkat ediyoruz.

Yukarıdaki işlemleri tamamlayın FTP'ye atın ve harika bir görüntüyü yakalayın.

demo

Bu makale'deki yardımlarından dolayı khazadum'a teşekkürlerimi sunarim.
Hızlı PM Gönder
Gönder
Alıntı ile Cevapla
Yeni Konu Aç Cevap Yaz
Şu an bu konuyu okuyan kişi sayısı: 1 (0 üye ve 1 misafir)
 
Seçenekler
Yetkileriniz
Konu Acma Yetkiniz Yok Cevap Yazma Yetkiniz Yok Eklenti Yükleme Yetkiniz Yok Mesajınızı Değiştirme Yetkiniz Yok
BB code is Açık Smileler Açık [IMG] Kodları Açık HTML-Kodu Kapalı
Trackbacks are Açık
Pingbacks are Açık
Refbacks are Açık
Forum Kuralları
Benzer Konular
Konu Konuyu Başlatan Forum Cevap Son Mesaj
Christmas Background karahanli Photoshop Paint Shop Pro Corel Freehand 0 15.12.2011 01:46
Javascript Background Değiştirme ve Swish i.ari Web Tasarım & Grafik 0 24.03.2009 02:28

Forum Saati: 00:04. Zaman dilimi GMT +3 olarak ayarlanmıştır.
Powered by vBulletin™ Version 3.8.7
Copyright © 2017 vBulletin Solutions, Inc. All rights reserved.