YouTube検索

2007年10月 4日 05:12 Mutsuo Gamo | 個別ページ | コメント(0) | トラックバック(0)

YouTubeの動画検索機能を追加するウィジット。

キーワード検索結果のサムネイルをクリックすると、動画をブログ上でオーバーレイ再生します。

<h3 class="widget-header">YouTube検索</h3>
<div class="widget-content">
  
 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/container/assets/container.css">   

<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/connection/connection-min.js"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/animation/animation-min.js"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/container/container-min.js"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/container/container_core-min.js"></script>
<link type="text/css" rel="stylesheet" href="http://media.g-poket.com/css/AquaSkin.css">

YAHOO.youtube.container.panel = new YAHOO.widget.Panel("panel", {  fixedcenter:true,width:"435px", visible:false, constraintoviewport:true } );

}
YAHOO.util.Event.addListener(window, "load", init);
</script>
<script type="text/javascript">

var page ='1';
var perpage ='10';
var pageCount=1;
var Prakucount=10;
var adshtml="";

function search( tag,page,perpage ) {

var url = 'http://www.g-poket.com/php/youtube/youtubeJSONP.php?'+"&tag="+encodeURI(tag)+"&page="+page+"&per_page="+perpage;
	var script  = document.createElement( 'script' );
	script.type = 'text/javascript';
	script.src  = url;
	document.body.appendChild( script );
}

function YouTubecallback( data ) {

var ele = document.getElementById('result_youtube');
	var res="";

if(!data){
		res+='見つかりませんでした。'
	    	ele.innerHTML = res;
		return;
	}

for (i=0;i<data.length;i++) {
		var video = data[i];

res += '<img id="'+video.id+'" src="'+video.thumbnail_url+'" border=0 alt="'+video.title+'" width="75" height="56" onclick="panelinit(this)" />';

}

ele.innerHTML = res;

var key = document.getElementById('tag').value;
	PrakuSearch({keyword:key});

}

function PrevPage(){

if(pageCount>0) {
		pageCount=pageCount-1;
	}else pageCount=1;
	
	search(document.getElementById('tag').value,pageCount,10)

}

function NextPage(){
 	pageCount=pageCount+1;
	search(document.getElementById('tag').value,pageCount,10)
}

function panelinit(obj) {

YAHOO.util.Event.addListener(obj.id, "click", YAHOO.youtube.container.panel.show, YAHOO.youtube.container.panel, true);
	var embed='<embed src="http://www.youtube.com/v/'+obj.id+'" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed>';
	YAHOO.youtube.container.panel.setHeader('<div class="tl"></div><span>'+obj.alt+'</span><div class="tr"></div>');

YAHOO.youtube.container.panel.setBody(embed);
	YAHOO.youtube.container.panel.setFooter('<span >'+adshtml+'</span><span style="margin:0 0 0 5px;text-align: right;font-size:8px;">developed by <a href="http://blogsquare256.blog85.fc2.com/" target="_blank">遊ぶブログ</a> <a href="http://www.g-poket.com/simple_youtube/" target="_blank">シンプル動画</a></span>');
	YAHOO.youtube.container.panel.render(document.body);

}

function PrakuSearch(param){
	var page=Math.floor(Math.random()*Prakucount+1);

param.developerId ='a7f1cf96c00c5f87f63a83e5d287d1fd';
	param.version = '2007-04-11';
	param.operation ='ItemSearch';
	param.hits = 1;
	param.page = page;
	param.imageFlag = 1;
	param.callBack = 'PrakuCallback';
	param.affiliateId='043a2c2d.c6b915a9.043a2c2e.fee41311';
	param.sort = 'random';

op = param.operation;

// APIリクエストURLの生成(GETメソッド)
	var apireq = 'http://api.rakuten.co.jp/rws/1.7/json?'+ objPrakuquery( param );

var script  = document.createElement( 'script' );
	script.type = 'text/javascript';
	script.charset = 'UTF-8';
	script.src  = apireq;
	document.body.appendChild( script );

}

function objPrakuquery ( obj ) {
    var list = [];
    for( var key in obj ) {
        var k = encodeURIComponent(key);
        var v = encodeURIComponent(obj[key]);
        list[list.length] = k+'='+v;
    }
    var query = list.join( '&' );
    return query;
}

function PrakuCallback( data ) {
	var status = data.Header.Status;
	var rakuten_html = "";
	if(status=="Success"){
		var list = data.Body.ItemSearch.Items.Item;
		var s=data.Body.ItemSearch;
		var iPrakucount=s.Prakucount; //検索結果の総商品数
		var ipage=s.page; //現在のページ番号
		var ifirst=s.first;//ページ内商品始追番
		var ilast=s.last;//ページ内商品終追番
		var ihits=s.hits;//ヒット件数
		var ipageCount=s.pageCount;//総ページ数
		if (iPrakucount<100)	Prakucount =iPrakucount;
		if (iPrakucount>100)	Prakucount =100;
		if(ipage==ipageCount) return;
		for(var i=0; i<list.length; i++){

var iCode = list[i].itemCode;
			var iName = list[i].itemName;
			var iPrice =list[i].itemPrice;
			var iUrl = list[i].itemUrl;
			var aUrl = list[i].affiliateUrl;
			var iImage = list[i].mediumImageUrl;
			var iCaption = list[i].itemCaption;

if (iName.length > 20) iName=iName.substring(0,20)+'･･･';

rakuten_html += '<a href="'+aUrl+'" target="_blank">'+iName+'</a>';
		}
	}

adshtml=rakuten_html;

}
</script>

<input type="text" name="tag"  id="tag" size="15"><br/>
<input type="button" value="検索" onClick="search(document.getElementById('tag').value,1,10)">
<input type="button" value="≪" onClick="PrevPage()">
<input type="button" value="≫" onClick="NextPage()">
<input type="button" id="hide" value="×" onClick="javascript:document.getElementById('result_youtube').innerHTML=''">
<P>
<div id="result_youtube"><span style="font-size:8px;">developed by <a href="http://blogsquare256.blog85.fc2.com/" target="_blank">遊ぶブログ</a></span></div>
</div>

トラックバック(0)

このブログ記事を参照しているブログ一覧: YouTube検索

このブログ記事に対するトラックバックURL: http://www.g-poket.com/mt4/mt-tb.cgi/550

コメントする

このページは、Mutsuo Gamoが2007年10月 4日 05:12に書いたブログ記事です。

ひとつ前のブログ記事は「Yahoo!動画検索」です。

次のブログ記事は「Google Video Search」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

YouTube検索

カテゴリ:

タグ:

トラックバック(0)

コメントする

このブログ記事について

YouTubu SS

ゲームコーナーPlus

iTunes Bar J

レシピBar

今日の献立

Google Video Search

検索

YouTube検索

MusicSearch

YouTubeLite

グルメランキング

12星座ランキング