Trick Posting Blogdetik: Posting berbagai media dengan jQuery Media Plugin

27 Dec 2011

Jika pada posting sebelumnya telah kita pelajari bersama cara membuat preview iframe yang berfungsi menampilkan video Youtube, Vimeo, DailyMotion, Google Maps, blog/web dan beberapa yang lain agar bisa ditampilkan sebagai materi posting di Blogdetik melalui jQuery Iframe Preview, maka untuk kali ini akan kita buat yang setingkat lebih di atasnya. Media Preview jQuery Plugin tak hanya sekedar membuat kita bisa memposting iframe dengan bentuk seperti yang tersebut di atas, namun beberapa media yang lain dalam bentuk video/movie (.mov, .mpg, .mpeg, .mp4, ogv, .wmv), audo/music (.mp3, ogg, dll), image(.jpg, .gif, .png), file flash (.flv, .swf) dengan leluasa dapat kita buat sebagai posting. Beberapa demo yang telah dipersiapkan dapat sampeyan buka agar lebih memperjelas maksud digunakannya Media Preview jQuery Plugins. Satu hal yang perlu diperhatikan, agar media preview dapat berfungsi sempurna maka PC harus dilengkapi dengan software QuickTime Player dan Window Media Player.

D E M O

Kode CSS

<style type="text/css" media="screen">
div.GRprev_video{position:relative;padding:4px;border-radius:5px;background:#aaa !important;border:1px solid #333;}
div.GRprev_audio, div.GRprev_iframe{position:relative;padding:4px;background:#aaa !important;border-radius:5px;border:1px solid #333 !important;}
div.GRprev_audio div, div.GRprev_iframe div, div.GRprev_video div{position:absolute;top:0;right:0;width:auto;height:0 !important;overflow:hidden;opacity:0;filter:alpha(opacity=0);font-weight:bold;font-size:11px;font-family:Arial;color:#eee;padding-left:10px;background:#000;}
div.GRprev_iframe{border-right:4px solid #888 !important;}
div.GRprev_audio:hover div, div.GRprev_iframe:hover div, div.GRprev_video:hover div{top:-25px;transition:0.7s;-o-transition:0.7s;-moz-transition:0.7s;-webkit-transition:0.7s;-ms-transition:0.7s;height:20px !important;opacity:1.0;filter:alpha(opacity=100);padding:3px 10px 0;}
</style>

javascript

<script src=""https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript>
//jQuery-metadata.js
(function($){$.extend({metadata:{defaults:{type:"class",name:"metadata",cre:/({.*})/,single:"metadata"},setType:function(type,name){this.defaults.type=type;this.defaults.name=name},get:function(elem,opts){var settings=$.extend({},this.defaults,opts);if(!settings.single.length){settings.single="metadata"}var data=$.data(elem,settings.single);if(data){return data}data="{}";if(settings.type=="class"){var m=settings.cre.exec(elem.className);if(m){data=m[1]}}else{if(settings.type=="elem"){if(!elem.getElementsByTagName){return}var e=elem.getElementsByTagName(settings.name);if(e.length){data=$.trim(e[0].innerHTML)}}else{if(elem.getAttribute!=undefined){var attr=elem.getAttribute(settings.name);if(attr){data=attr}}}}if(data.indexOf("{")<0){data="{"+data+"}"}data=eval("("+data+")");$.data(elem,settings.single,data);return data}}});$.fn.metadata=function(opts){return $.metadata.get(this[0],opts)}})(jQuery);
//jQuery-media-preview.js
(function(c){var h=c.browser.msie&&c.browser.version<9;c.fn.media=function(m,l,n){if(m=="undo"){return this.each(function(){var p=c(this);var o=p.data("media.origHTML");if(o){p.replaceWith(o)}})}return this.each(function(){if(typeof m=="function"){n=l;l=m;m={}}var x=g(this,m);if(typeof l=="function"){l(this,x)}var v=j();var p=v.exec(x.src.toLowerCase())||[""];x.type?p[0]=x.type:p.shift();for(var u=0;u<p.length;u++){fn=p[u].toLowerCase();if(e(fn[0])){fn="fn"+fn}if(!c.fn.media[fn]){continue}var t=c.fn.media[fn+"_player"];if(!x.params){x.params={}}if(t){var s=t.autoplayAttr=="autostart";x.params[t.autoplayAttr||"autoplay"]=s?(x.autoplay?1:0):x.autoplay?true:false}var q=c.fn.media[fn](this,x);q.css("backgroundColor",x.bgColor).width(x.width);if(x.canUndo){var w=c("<div></div>").append(this);q.data("media.origHTML",w.html())}if(typeof n=="function"){n(this,q[0],x,t.name)}break}})};c.fn.media.mapFormat=function(m,l){if(!m||!l||!c.fn.media.defaults.players[l]){return}m=m.toLowerCase();if(e(m[0])){m="fn"+m}c.fn.media[m]=c.fn.media[l];c.fn.media[m+"_player"]=c.fn.media.defaults.players[l]};c.fn.media.defaults={standards:true,canUndo:true,width:400,height:400,autoplay:0,bgColor:"#ffffff",params:{wmode:"transparent"},attrs:{},flvKeyName:"file",flashvars:{},flashVersion:"7",expressInstaller:null,
flvPlayer:"GR_mediaplayer.swf",
mp3Player:"GR_mediaplayer.swf",
silverlight:{inplaceInstallPrompt:"true",isWindowless:"true",framerate:"24",version:"0.9",onError:null,onLoad:null,initParams:null,userContext:null}};c.fn.media.defaults.players={flash:{name:"flash",title:"Flash",types:"flv,mp3,swf",mimetype:"application/x-shockwave-flash",pluginspage:"http://www.adobe.com/go/getflashplayer",ieAttrs:{classid:"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000",type:"application/x-oleobject",codebase:"http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version="+c.fn.media.defaults.flashVersion}},quicktime:{name:"quicktime",title:"QuickTime",mimetype:"video/quicktime",pluginspage:"http://www.apple.com/quicktime/download/",types:"aif,aiff,aac,au,bmp,gsm,mov,mid,midi,mpg,mpeg,mp4,m4a,psd,qt,qtif,qif,qti,snd,tif,tiff,wav,3g2,3gp",ieAttrs:{classid:"clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B",codebase:"http://www.apple.com/qtactivex/qtplugin.cab#version=7,3,0,0"}},realplayer:{name:"real",title:"RealPlayer",types:"ra,ram,rm,rpm,rv,smi,smil",mimetype:"audio/x-pn-realaudio-plugin",pluginspage:"http://www.real.com/player/",autoplayAttr:"autostart",ieAttrs:{classid:"clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"}},winmedia:{name:"winmedia",title:"Windows Media",types:"asx,asf,avi,wma,wmv",mimetype:c.browser.mozilla&&k()?"application/x-ms-wmp":"application/x-mplayer2",pluginspage:"http://www.microsoft.com/Windows/MediaPlayer/",autoplayAttr:"autostart",oUrl:"src",ieAttrs:{classid:"CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95",type:"application/x-oleobject"}},img:{name:"img",title:"Image",types:"gif,png,jpg"},iframe:{name:"iframe",types:"html,pdf,ogg,ogv",},silverlight:{name:"silverlight",types:"xaml"}};function k(){var l=navigator.plugins;for(var m=0;m<l.length;m++){var n=l[m];if(n.filename=="np-mswmp.dll"){return true}}return false}var a=1;for(var i in c.fn.media.defaults.players){var d=c.fn.media.defaults.players[i].types;c.each(d.split(","),function(l,m){if(e(m[0])){m="fn"+m}c.fn.media[m]=c.fn.media[i]=b(i);c.fn.media[m+"_player"]=c.fn.media.defaults.players[i]})}function j(){var m="";for(var l in c.fn.media.defaults.players){if(m.length){m+=","}m+=c.fn.media.defaults.players[l].types}return new RegExp("\.("+m.replace(/,/ig,"|")+")\b")}function b(l){return function(n,m){return f(n,m,l)}}function e(l){return"0123456789".indexOf(l)>-1}function g(o,D){D=D||{};var C=c(o);var B=o.className||"";var A=c.metadata?C.metadata():c.meta?C.data():{};A=A||{};var z=A.width||parseInt(((B.match(/bw:(d+)/)||[])[1]||0))||parseInt(((B.match(/bwidth:(d+)/)||[])[1]||0));var t=A.height||parseInt(((B.match(/bh:(d+)/)||[])[1]||0))||parseInt(((B.match(/bheight:(d+)/)||[])[1]||0));if(z){A.width=z}if(t){A.height=t}if(B){A.cls=B}var q="data-";for(var s=0;s<o.attributes.length;s++){var y=o.attributes[s],r=c.trim(y.name);var u=r.indexOf(q);if(u===0){r=r.substring(q.length);A[r]=y.value}}var y=c.fn.media.defaults;var x=D;var v=A;var m={params:{bgColor:D.bgColor||c.fn.media.defaults.bgColor}};var l=c.extend({},y,x,v);c.each(["attrs","params","flashvars","silverlight"],function(n,p){l[p]=c.extend({},m[p]||{},y[p]||{},x[p]||{},v[p]||{})});if(typeof l.caption=="undefined"){l.caption=C.text()}l.src=l.src||C.attr("href")||C.attr("src")||"unknown";return l}c.fn.media.swf=function(q,l){if(!window.SWFObject&&!window.swfobject){if(l.flashvars){var t=[];for(var r in l.flashvars){t.push(r+"="+l.flashvars[r])}if(!l.params){l.params={}}l.params.flashvars=t.join("&")}return f(q,l,"flash")}var n=q.id?(' id="'+q.id+'"'):"";var u=l.cls?(' class="'+l.cls+'"'):"";var s=c("<div"+n+u+">");if(window.swfobject){c(q).after(s).appendTo(s);if(!q.id){q.id="movie_player_"+a++}swfobject.embedSWF(l.src,q.id,l.width,l.height,l.flashVersion,l.expressInstaller,l.flashvars,l.params,l.attrs)}else{c(q).after(s).remove();var o=new SWFObject(l.src,"movie_player_"+a++,l.width,l.height,l.flashVersion,l.bgColor);if(l.expressInstaller){o.useExpressInstall(l.expressInstaller)}for(var m in l.params){if(m!="bgColor"){o.addParam(m,l.params[m])}}for(var r in l.flashvars){o.addVariable(r,l.flashvars[r])}o.write(s[0])}if(l.caption){c("<div>").appendTo(s).html(l.caption)}return s};c.fn.media.flv=c.fn.media.mp3=function(o,p){var q=p.src;var n=/.mp3b/i.test(q)?p.mp3Player:p.flvPlayer;var m=p.flvKeyName;q=encodeURIComponent(q);p.src=n;p.src=p.src+"?"+m+"="+(q);var l={};l[m]=q;p.flashvars=c.extend({},l,p.flashvars);return c.fn.media.swf(o,p)};c.fn.media.xaml=function(r,s){if(!window.Sys||!window.Sys.Silverlight){if(c.fn.media.xaml.warning){return}c.fn.media.xaml.warning=1;alert("You must include the Silverlight.js script.");return}var q={width:s.width,height:s.height,background:s.bgColor,inplaceInstallPrompt:s.silverlight.inplaceInstallPrompt,isWindowless:s.silverlight.isWindowless,framerate:s.silverlight.framerate,version:s.silverlight.version};var o={onError:s.silverlight.onError,onLoad:s.silverlight.onLoad};var p=r.id?(' id="'+r.id+'"'):"";var n=s.id||"AG"+a++;var m=s.cls?(' class="'+s.cls+'"'):"";var l=c("<div"+p+m+">");c(r).after(l).remove();Sys.Silverlight.createObjectEx({source:s.src,initParams:s.silverlight.initParams,userContext:s.silverlight.userContext,id:n,parentElement:l[0],properties:q,events:o});if(s.caption){c("<div>").appendTo(l).html(s.caption)}return l};function f(r,l,w){var A=c(r);var q=c.fn.media.defaults.players[w];if(w=="iframe"){q=c('<iframe width="'+l.width+'" height="'+l.height+'" >');q.attr("src",l.src);q.css("backgroundColor",q.bgColor)}else{if(w=="img"){q=c("<img>");q.attr("src",l.src);l.width&&q.attr("width",l.width);l.height&&q.attr("height",l.height);q.css("backgroundColor",q.bgColor)}else{if(h){var u=['<object width="'+l.width+'" height="'+l.height+'" '];for(var x in l.attrs){u.push(x+'="'+l.attrs[x]+'" ')}for(var x in q.ieAttrs||{}){var y=q.ieAttrs[x];if(x=="codebase"&&window.location.protocol=="https:"){y=y.replace("http","https")}u.push(x+'="'+y+'" ')}u.push("></object>");var n=['<param name="'+(q.oUrl||"src")+'" value="'+l.src+'">'];for(var x in l.params){n.push('<param name="'+x+'" value="'+l.params[x]+'">')}var q=document.createElement(u.join(""));for(var s=0;s<n.length;s++){q.appendChild(document.createElement(n[s]))}}else{if(l.standards){var u=['<object type="'+q.mimetype+'" width="'+l.width+'" height="'+l.height+'"'];if(l.src){u.push(' data="'+l.src+'" ')}if(c.browser.msie){for(var x in q.ieAttrs||{}){var y=q.ieAttrs[x];if(x=="codebase"&&window.location.protocol=="https:"){y=y.replace("http","https")}u.push(x+'="'+y+'" ')}}u.push(">");u.push('<param name="'+(q.oUrl||"src")+'" value="'+l.src+'">');for(var x in l.params){if(x=="wmode"&&w!="flash"){continue}u.push('<param name="'+x+'" value="'+l.params[x]+'"><param name="scale" value="tofit">')}u.push("<div><p><strong>"+q.title+" Required</strong></p><p>"+q.title+' is required to view this media. <a href="'+q.pluginspage+'">Download Here</a>.</p></div>');u.push("</object>")}else{var u=['<embed width="'+l.width+'" height="'+l.height+'" style="display:block"'];if(l.src){u.push(' src="'+l.src+'" ')}for(var x in l.attrs){u.push(x+'="'+l.attrs[x]+'" ')}for(var x in q.eAttrs||{}){u.push(x+'="'+q.eAttrs[x]+'" ')}for(var x in l.params){if(x=="wmode"&&w!="flash"){continue}u.push(x+'="'+l.params[x]+'" ')}u.push("></embed>")}}}}var m=r.id?(' id="'+r.id+'"'):"";var z=l.cls?(' class="'+l.cls+'"'):"";var t=c("<div"+m+z+">");A.after(t).remove();(h||w=="iframe"||w=="img")?t.append(q):t.html(u.join(""));if(l.caption){c("<div>").appendTo(t).html(l.caption)}return t}})(jQuery);
//swfObject-1.5.js
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;
//gubhugreyot.blogdetik.com
</script>
Cara Menggunakan Media Preview jQuery Plugin
  1. Download media-player.swf dengan klik link download di bawah ini:
    download media-player.swf
  2. Upload media-player.swf yang telah sampeyan download ke .swf hosting. Jika blom punya swf hosting, silahkan klik di sini!
  3. Jika sampeyan sudah selesai upload dan mendapatkan URL media playernya, silahkan copy javascript dan ganti kode yang bercetak tebal pada javascript (GR_mediaplayer.swf) dengan URL media-player.swf hasil upload.
  4. Copy Kode CSS
  5. Login ke Blogdetik
  6. Simpan Kode CSS dan Javascript melalui Widgetize Any HTML.
  7. Untuk menampilkan media di halaman posting Blogdetik, gunakan kode seperti yang terlihat pada ke-4 Demo yang sebelumnya sudah sampeyan lihat.
Keterangan/Catatan:
  1. Untuk mendapatkan panduan cara menyimpan kode CSS dan javascript, silahkan klik di sini.
  2. Solusi yang lain silahkan klik di sini!.
  3. Untuk upload javascript di javascript hosting silahkan klik di sini !

Tutorial Lain

Sumber : http://jquery.malsup.com/media/

Berbagai tutorial dan panduan blogger dan blogDETIK dapat sampeyan buka dengan :

Happy Blogging


TAGS Tutorial BlogDETIK


-

Author

Follow Me