Kick Off (moved to Yemkay.com)

This blog has been moved to my personal site Yemkay.com

Add to Google Reader or Homepage Subscribe in Bloglines Add to netvibes

Monday, June 25, 2007

Youtube PlusBox - Showing video on demand

எல்லாமே உக்காந்த யெடெத்துலேயே கிடச்சா ரொம்ப சௌகரியந்தான். இது வலை மேயலுக்கும் பொருந்தும். கூகுளுக்கு இது நன்றாக தெரியும். அதனால் தான், தனது முடிவுகளில் வரும் வீடியோக்களை அதே இடத்திலேயே பார்க்குமாறு அமைத்தது. அதன் Source Code (www.google.com/extern_js/f/CgJlbhgDGAc/6TK0G_vpOxU.js) -ஐ பார்த்து எதாவது Copy-Paste செய்யலாம் என்று, அதை பார்த்தால் தலை தான் சுற்றுகிறது.
ஒரு முடிவோடு களத்தில் இறங்கி, இன்னொரு தளத்திலிருந்த இந்த JavaScript Code -ஐ எடுத்து, வீடியோவை காட்டுமாறு மாற்றினேன்.


இதோ செயல் விளக்கம்.

உங்கள் Template-ஐ திறந்து Head->Style பகுதியினுள் இதை ஒட்டவும்.


/* Plus Box styles start here. */
.PlusBox_floatL {float:left;}
.PlusBox_CL {clear:both;margin:0px;padding:0px;}
.PlusBox_link {cursor:pointer; font-weight:700; text-decoration:underline; color:blue;}
.PlusBox_plus {float:left;background:url('http://www.google.com/mb/plus_sm.gif') no-repeat;width:14px;height:14px;cursor:pointer; margin-left:0px; margin-right:4; margin-top:3; margin-bottom:0;}
.PlusBox_minus {float:left;background:url('http://www.google.com/mb/minus_sm.gif') no-repeat;width:14px;height:14px;cursor:pointer; margin-left:0px; margin-right:4; margin-top:3; margin-bottom:0;}
/* Plus Box styles end here. */


Head பகுதியினுள் இதை ஒட்டவும். இந்த Script-ல் சில HTML Entities வருவதால் இதை CDATAவினுள் தான் ஒட்டியாக வேண்டும்.

<script language='javascript' type='text/javascript'>
//<![CDATA[
/* Plus Box script starts here */


function PlusBox_Show(holderId, action){
 if (document.getElementById(holderId)==null)
  return;
 var videoGroup = document.getElementById(holderId).getAttribute("videoGroup");
 var videoId = document.getElementById(holderId).getAttribute("videoId");
 var videoCount = document.getElementById(holderId).getAttribute("videoCount");

 for (var i=1;i<=videoCount;i++){
  if (i==videoId)
  { 
   PlusBox_Insert(holderId, action);
  }
  else if (action == "expand")
  {
   if (document.getElementById(videoGroup+ "_" + i)==null)
    continue;
   var placeHolder = document.getElementById(videoGroup+ "_" + i).getAttribute("placeHolder"); // Get the place holder's id
   var plusboxStatus = document.getElementById(placeHolder).getAttribute("plusboxStatus");
   if (plusboxStatus == "expand")
    PlusBox_Insert(placeHolder, "collapse");
  }
 }
}

function PlusBox_Insert(holderId, action) {
 if (document.getElementById(holderId)==null)
  return;
 var videoGroup = document.getElementById(holderId).getAttribute("videoGroup");
 var videoId = document.getElementById(holderId).getAttribute("videoId");
 var videoCount = document.getElementById(holderId).getAttribute("videoCount");
 var txtShow = document.getElementById(holderId).getAttribute("txtShow");
 var txtHide = document.getElementById(holderId).getAttribute("txtHide");
 var youTubeId = document.getElementById(holderId).getAttribute("youTubeId");
 var videoWidth = document.getElementById(holderId).getAttribute("videoWidth");
 var videoHeight = document.getElementById(holderId).getAttribute("videoHeight");
 if (action == "expand")
 {
  // Show the embedded video
  var inner =
  "<div style=\"width:260px;margin-left:2px;\" class=\"PlusBox_floatL\">" + "\n" +
  "<div id=\"" + videoGroup + "_B_" + videoId + "\" onclick=\"PlusBox_Show('" + holderId + "', 'collapse')\" class=\"PlusBox_minus\"></div>" + "\n" +
  "<div class=\"PlusBox_floatL\">" + "\n" +
  "<font color=\"#0000FF\">" + "\n" +
  "<a id=\"" + videoGroup + "_F_" + videoId + "\" onclick=\"PlusBox_Show('" + holderId + "', 'collapse')\" class=\"PlusBox_link\" txtShow=\"" + txtShow +"\" txtHide=\"" + txtHide + "\">" + txtShow + "</a>" + "\n" +
  "</font>" + "\n" +
  "</div>" + "\n" +
  "<div style=\"width:75px;margin-top:6px;margin-left:4px;\" class=\"PlusBox_floatL\"></div>" + "\n" +
  "</div>" + "\n" +
  "<div class=\"PlusBox_CL\"></div>" + "\n" +
  "<!-- YouTube Plus Box Video starts here -->" + "\n" +
  "<div id=\"" + videoGroup + "_" + videoId + "\" placeHolder = \"" + holderId + "\" style=\"display:block; margin:5 0 0 20px;\">" + "\n" +
  "<!-- Video Embed starts here -->" + "\n" +
  "<object width=\"" + videoWidth +"\" height=\"" + videoHeight + "\">" + "\n" +
  "<param name=\"movie\" value=\"http://www.youtube.com/v/" + youTubeId +"\"></param>" + "\n" +
  "<param name=\"wmode\" value=\"transparent\"></param>" + "\n" +
  "<embed src=\"http://www.youtube.com/v/" + youTubeId +"\" type=\"application/x-shockwave-flash\" wmode=\"transparent\" width=\""+ videoWidth + "\" height=\"" + videoHeight +"\"></embed>" + "\n" +
  "</object>" + "\n" +
  "<!-- Video Embed ends here -->" + "\n" +
  "</div>" + "\n" +
  "<!-- YouTube Plus Box Video ends here -->";

  document.getElementById(holderId).innerHTML = inner;
  document.getElementById(holderId).setAttribute("plusboxStatus", "expand");
 } else {
  // Revert to the collapsed text link
  //var txtShow = document.getElementById(holderId).innerText;
  var colpasedHtml = "";
  colpasedHtml += "<div style=\"width:260px;margin-left:2px;\" class=\"PlusBox_floatL\">";
  colpasedHtml += "<div onclick=\"PlusBox_Show('" + holderId + "', 'expand')\" class=\"PlusBox_plus\"></div>";
  colpasedHtml += "<div class=\"PlusBox_floatL\">";
  colpasedHtml += "<a onclick=\"PlusBox_Show('" + holderId + "', 'expand')\" class=\"PlusBox_link\">" + txtShow + "</a>";
  colpasedHtml += "</div>";
  colpasedHtml += "<div style=\"width:75px;margin-top:6px;margin-left:4px;\" class=\"PlusBox_floatL\"></div>";
  colpasedHtml += "</div>";
  colpasedHtml += "<div class=\"PlusBox_CL\"></div>";
  document.getElementById(holderId).innerHTML = colpasedHtml;
  document.getElementById(holderId).setAttribute("plusboxStatus", "collapse");
 }
}


/*Plus Box script ends here*/
//]]>
</script>


பின்னர் பதிக்கும் போது இக்கோடில் உள்ள கோடிட்ட இடங்களை நிரப்பவும்.

<div id="UNIQUE_PLACEHOLDER_ID" plusboxStatus="collapse" videoGroup="GROUP_NAME" videoId="VIDEO_NUM" videoCount="VIDEO_TOTALCOUNT" txtShow="SHOW_VIDEO_CAPTION" txtHide="HIDE_VIDEO_CAPTION" youTubeId="YOUTUBE_ID" videoWidth="425" videoHeight="350">
 <div style="width:260px;margin-left:2px;" class="PlusBox_floatL">
  <div onclick="PlusBox_Show('UNIQUE_PLACEHOLDER_ID', 'expand')" class="PlusBox_plus"></div>
  <div class="PlusBox_floatL">
   <a onclick="PlusBox_Show('UNIQUE_PLACEHOLDER_ID', 'expand')" class="PlusBox_link">SHOW_VIDEO_CAPTION</a>
  </div>
 <div style="width:75px;margin-top:6px;margin-left:4px;" class="PlusBox_floatL"></div>
 </div>
<div class="PlusBox_CL"></div>
</div>


UNIQUE_PLACEHOLDER_ID - ஒரு யுனிக் பெயரை இடவும்.
GROUP_NAME - ஒன்றுக்கு மேற்பட்ட வீடியோக்களை இணைக்க வல்லதொரு பெயரை இடவும். இவ்வாறு இணைக்கப் பட்ட வீடியோக்களுள் ஒன்றை விரித்தால் அந்த இணையிலுள்ள மற்ற விடியோக்கள் சுருங்கும்.
VIDEO_NUM - இந்த இணையில் இந்த விடியோவின் எண் (1, 2, 3...)
VIDEO_TOTALCOUNT - இந்த இணையில் உள்ள மொத்த விடியோக்களின் எண்ணிக்கை
SHOW_VIDEO_CAPTION - விடியோவின் சுருங்கிய நிலையில் காட்டப் பட வேண்டிய தலைப்பு
HIDE_VIDEO_CAPTION - விடியோவின் விரிந்த நிலையில் காட்டப் பட வேண்டிய தலைப்பு
YOUTUBE_ID - விடியோவின் யூடியூப் ஐ.டி.

பிறகு உங்கள் கோடை ஒரே வரியில் வருமாறு செய்யவும். கடைசியில் உங்கள் கோட் இப்படித் தான் தோன்ற வேண்டும்.


<div id="GibbsSixes" plusboxStatus="collapse" videoGroup="cricketquotes" videoId="1" videoCount="3" txtShow="Watch Gibbs 6 X 6" txtHide="Hide Video" youTubeId="IZwOXPnJfLo" videoWidth="425" videoHeight="350"><div style="width:260px;margin-left:2px;" class="PlusBox_floatL"> <div onclick="PlusBox_Show('GibbsSixes', 'expand')" class="PlusBox_plus"></div><div class="PlusBox_floatL"><a onclick="PlusBox_Show('GibbsSixes', 'expand')" class="PlusBox_link">Watch Gibbs 6 X 6</a></div><div style="width:75px;margin-top:6px;margin-left:4px;" class="PlusBox_floatL"></div></div><div class="PlusBox_CL"></div></div>
<div id="McGrathSledging" plusboxStatus="collapse" videoGroup="cricketquotes" videoId="2" videoCount="3" txtShow="Watch Macgrath-Sarwan spat" txtHide="Hide Video" youTubeId="-IsVsLh-yGs" videoWidth="425" videoHeight="350"><div style="width:260px;margin-left:2px;" class="PlusBox_floatL"><div onclick="PlusBox_Show('McGrathSledging', 'expand')" class="PlusBox_plus"></div><div class="PlusBox_floatL"><a onclick="PlusBox_Show('McGrathSledging', 'expand')" class="PlusBox_link">Watch Macgrath-Sarwan spat</a></div><div style="width:75px;margin-top:6px;margin-left:4px;" class="PlusBox_floatL"></div></div><div class="PlusBox_CL"></div></div>
<div id="WarneBall" plusboxStatus="collapse" videoGroup="cricketquotes" videoId="3" videoCount="3" txtShow="Watch Ball of the Century" txtHide="Hide Video" youTubeId="66I1YDOKcGI" videoWidth="425" videoHeight="350"><div style="width:260px;margin-left:2px;" class="PlusBox_floatL"> <div onclick="PlusBox_Show('WarneBall', 'expand')" class="PlusBox_plus"></div><div class="PlusBox_floatL"><a onclick="PlusBox_Show('WarneBall', 'expand')" class="PlusBox_link">Watch Ball of the Century</a></div><div style="width:75px;margin-top:6px;margin-left:4px;" class="PlusBox_floatL"></div></div><div class="PlusBox_CL"></div></div>


இந்த எடுத்துக்காட்டு என்னுடைய முந்தய பதிவிலிருந்து எடுத்தது.

Related links:-

posted at 8:35 PM

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)