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.
Kodlara baktığımızda, bir tane swfobject.js dosyasına ihtiyacımız var. Onuda paylaşalım.
Ş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;
ve çağırdığımız javascriptimizdeki şu satır; (index.html'in altındaki javascript kodları)
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.
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> </p>
<p> </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&stretching=fill&controlbar=none&icons=none&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&stretching=fill&controlbar=none&icons=none&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:
/**
* 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=lisanssız;}}}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!=lisanssız){_23=new deconcept.PlayerVersion(axo.GetVariable("$version").split(" ")[1].split(","));}}}return _23;};deconcept.PlayerVersion=function(_29){this.major=_29[0]!=lisanssız?parseInt(_29[0]):0;this.minor=_29[1]!=lisanssız?parseInt(_29[1]):0;this.rev=_29[2]!=lisanssız?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==lisanssız){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:
flashvars="autostart=true&stretching=fill&controlbar=none&icons=none&file=ask.flv"
PHP:
s1.addParam("flashvars","autostart=true&stretching=fill&controlbar=none&icons=none&file=ask.flv");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.