YouTubeAPIYouTube Data APIで取得可能なフィード
- 動画検索のクエリ パラメータ[vq」〔検索キーワードを指定〕
- 動画検索のクエリ パラメータ「alt」〔フォーマット指定〕
- 動画検索のクエリ パラメータ「author」〔特定のユーザーを指定〕
- 動画検索のクエリ パラメータ「max-results」〔最大取得数指定〕
- 動画検索のクエリ パラメータ「start-index」〔取得位置指定〕
- 動画検索のクエリ パラメータ「lr」〔地域指定〕
- 動画検索のクエリ パラメータ「orderby」〔動画の並び替え〕
- 動画検索のクエリ パラメータ「time」〔アップされた期間指定〕
- 「関連動画フィード」を取得して表示
- 標準フィード:「評価の高い動画フィード」を取得して表示〔top_rated〕
- 標準フィード:「お気に入り登録の多い動画フィード」を取得して表示〔top_favorites〕
- 標準フィード:「人気の動画フィード」を取得して表示〔most_viewed〕
- 標準フィード:「新着動画フィード」を取得して表示〔most_recent〕
- 標準フィード:「話題の動画フィード」を取得して表示〔most_discussed〕
- 標準フィード:「コメントの多い動画フィード」を取得して表示〔most_responded〕
- 標準フィード:「おすすめ動画フィード」を取得して表示〔recently_featured〕
- 「ユーザーのお気に入りフィード」を取得して表示〔favorites〕
- 「再生リストフィード」を取得して表示〔playlists〕
動画検索のクエリ パラメータ[vq」
検索キーワードを指定
2011/1/9
任意のキーワードで検索した動画のフィードを取得します。
検索キーワードは「vq」パラメータに指定します。
http://gdata.youtube.com/feeds/api/videos?vq=検索キーワード
サンプルでは、日本で「dog+chihuahua」というキーワードで動画を検索。 jQueryのgetJSON()を使用してフィードを取得して、動画情報を表示しています。 地域を日本に設定するには、標準フィードのURLにregionID「JP」を挿入します。 フィードをJSON形式で受け取る場合は「alt」パラメータに"json"を指定します(デフォルトはXML形式)。
http://gdata.youtube.com/feeds/api/videos?lr=jp&vq=dog+chihuahua&alt=json

<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" ></script> <script type="text/javascript"> $(function() { var isIE=false; if(navigator.userAgent.toLowerCase().indexOf("msie")!=-1) isIE=true; if(isIE){ var url="http://gdata.youtube.com/feeds/api/videos?lr=ja&vq=dog+chihuahua&alt=json-in-script&callback=getList"; var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.setAttribute("src", url); document.getElementsByTagName("head")[0].appendChild(script); //$("head").append(script); これはだめ }else{ $.getJSON( "http://gdata.youtube.com/feeds/api/videos", { lr:"ja", vq:"dog+chihuahua", alt:"json" }, function(xml) { getList(xml); } ); } }); /* 日付フォーマット */ var formatDate = function(dateString) { /* var d = new Date(dateString); var day = d.getDate(); var month = d.getMonth()+1; var year = d.getFullYear(); */ var dary=dateString.split("-"); var year=dary[0]; var month=dary[1]; var day=dary[2].substring(0,2); return year+"年"+month+"月"+day+"日"; } /* 3桁区切り */ function addFigure(str) { var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } function getList(xml){ $('#load').fadeOut(); var feed = xml.feed; $.each(feed.entry, function(i,item){ var tmp=item.id.$t.split("video:"); var vid=tmp[tmp.length-1]; var s=''; s+='<dt><img src="'+item.media$group.media$thumbnail[0].url+'" /></dt>'; s+='<dd>'; s+='<div class="title"><a href="'+item.link[0].href+'">'+item.title.$t+'</a></div>'; s+='<p>'; s+='作成者:<a href="http://www.youtube.com/user/'+item.author[0].name.$t+'">'+item.author[0].name.$t+'</a>|'; s+='公開日:'+formatDate(item.published.$t)+''; s+='<br>'; if(item.gd$rating){ s+='評価平均:'+item.gd$rating.average+'|'; } if(item.yt$statistics){ s+='お気に入り登録数:'+addFigure(item.yt$statistics.favoriteCount)+'|'; s+='再生回数:'+addFigure(item.yt$statistics.viewCount)+'回'; } s+='</p>'; s+='</dd>'; $("#demo").append('<dl class="video cf">'+s+'</dl>'); $(".video").fadeIn(1000); }); } </script> <!-- CSS --> <style type="text/css"> #demo { margin:0; padding:0; } #demo dl { margin:5px 0; padding:0; clear:both; } #demo dt { margin:0; padding:3px; width:120px; height:90px; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; border:1px solid #ccc; float:left; clear:both; overflow:hidden; } #demo dt img { overflow:hidden; width:120px; height:90px; } #demo dd { margin:0 0 0 140px; padding:0; } #demo dd div.title { font-size:110%; font-weight:bold; } #demo dd span { color:#ff6699; font-weight:bold; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <h2>YouTubeで「dog+chihuahua」キーワードで動画検索した結果を表示(日本語のフィードのみ)</h2> <!-- CODE --> <div id="load"><img src='/content/img/ajax/loadingIcon.gif'></div> <div id="demo"></div> <!-- / CODE --> </div> </body> </html>
動画検索のクエリ パラメータ「alt」
フォーマット指定
2011/1/9
取得するフィードのフォーマットを指定する場合は、URLに「alt」パラメータを付加します。 指定可能な値は、atom(デフォルト)、rss、jsonの3種類です。
http://gdata.youtube.com/feeds/api/videos?alt={atom|rss|json}
サンプルでは日本で「犬」でYouTube動画検索した結果をJSON形式で受け取り、jQueryのgetJSON()を使用してフィードの内容を表示しています。
http://gdata.youtube.com/feeds/api/videos?vq=犬&lr=ja&alt=json

<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script> <script type="text/javascript"> $(function() { var isIE=false; if(navigator.userAgent.toLowerCase().indexOf("msie")!=-1) isIE=true; if(isIE){ var url="http://gdata.youtube.com/feeds/api/videos?lr=ja&vq=犬&alt=json-in-script&callback=getList"; var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.setAttribute("src", url); document.getElementsByTagName("head")[0].appendChild(script); //$("head").append(script); これはだめ }else{ $.getJSON( "http://gdata.youtube.com/feeds/api/videos", { "lr":"ja", /* 日本 */ "vq":"犬", "alt":"json" /* JSON形式 */ }, function(xml) { getList(xml); } ); } }); /* 日付フォーマット */ var formatDate = function(dateString) { /* var d = new Date(dateString); var day = d.getDate(); var month = d.getMonth()+1; var year = d.getFullYear(); */ var dary=dateString.split("-"); var year=dary[0]; var month=dary[1]; var day=dary[2].substring(0,2); return year+"年"+month+"月"+day+"日"; } /* 3桁区切り */ function addFigure(str) { var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } function getList(xml){ $('#load').fadeOut(); var feed = xml.feed; $.each(feed.entry, function(i,item){ var tmp=item.id.$t.split("video:"); var vid=tmp[tmp.length-1]; var s=''; s+='<dt><img src="'+item.media$group.media$thumbnail[0].url+'" /></dt>'; s+='<dd>'; s+='<div class="title"><a href="'+item.link[0].href+'">'+item.title.$t+'</a></div>'; s+='<p>'; s+='作成者:<a href="http://www.youtube.com/user/'+item.author[0].name.$t+'">'+item.author[0].name.$t+'</a>|'; s+='公開日:'+formatDate(item.published.$t)+'|'; s+='再生回数:'+addFigure(item.yt$statistics.viewCount)+'回'; s+='</p>'; s+='</dd>'; $("#demo").append('<dl class="video cf">'+s+'</dl>'); $(".video").fadeIn(1000); }); } </script> <!-- CSS --> <style type="text/css"> #demo { margin:0; padding:0; } #demo dl { margin:5px 0; padding:0; clear:both; } #demo dt { margin:0; padding:3px; width:120px; height:90px; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; border:1px solid #ccc; float:left; clear:both; overflow:hidden; } #demo dt img { overflow:hidden; width:120px; height:90px; } #demo dd { margin:0 0 0 140px; padding:0; } #demo dd div.title { font-size:110%; font-weight:bold; } #demo dd span { color:#ff6699; font-weight:bold; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <h2>日本で「犬」でYouTube動画を検索した結果をJSON形式で取得して表示。</h2> <!-- CODE --> <div id="load"><img src='/content/img/ajax/loadingIcon.gif'></div> <div id="demo"></div> <!-- / CODE --> </div> </body> </html>
動画検索のクエリ パラメータ「max-results」
最大取得数指定
2011/1/9
取得する動画の件数をしていする場合は、URLに「max-resultes」パラメータを付加します。
サンプルでは、「オムライス」でYouTube動画を検索した結果を10件取得して表示しています。
http://gdata.youtube.com/feeds/api/videos? vq=オムライス&max-results=10&alt=json

<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script> <script type="text/javascript"> $(function() { var isIE=false; if(navigator.userAgent.toLowerCase().indexOf("msie")!=-1) isIE=true; if(isIE){ var url="http://gdata.youtube.com/feeds/api/videos?vq=オムライス&max-results=10&alt=json-in-script&callback=getList"; var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.setAttribute("src", url); document.getElementsByTagName("head")[0].appendChild(script); //$("head").append(script); これはだめ }else{ $.getJSON( "http://gdata.youtube.com/feeds/api/videos", { "vq":"オムライス", "max-results":10, "alt":"json" }, function(xml) { getList(xml); } ); } }); /* 日付フォーマット */ var formatDate = function(dateString) { /* var d = new Date(dateString); var day = d.getDate(); var month = d.getMonth()+1; var year = d.getFullYear(); */ var dary=dateString.split("-"); var year=dary[0]; var month=dary[1]; var day=dary[2].substring(0,2); return year+"年"+month+"月"+day+"日"; } /* 3桁区切り */ function addFigure(str) { var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } function getList(xml){ $('#load').fadeOut(); var feed = xml.feed; $.each(feed.entry, function(i,item){ var tmp=item.id.$t.split("video:"); var vid=tmp[tmp.length-1]; var s=''; s+='<dt><img src="'+item.media$group.media$thumbnail[0].url+'" /></dt>'; s+='<dd>'; s+='<div class="title"><a href="'+item.link[0].href+'">'+item.title.$t+'</a></div>'; s+='<p>'; s+='作成者:<a href="http://www.youtube.com/user/'+item.author[0].name.$t+'">'+item.author[0].name.$t+'</a>|'; s+='公開日:'+formatDate(item.published.$t)+'|'; s+='再生回数:'+addFigure(item.yt$statistics.viewCount)+'回'; s+='</p>'; s+='</dd>'; $("#demo").append('<dl class="video cf">'+s+'</dl>'); $(".video").fadeIn(1000); }); } </script> <!-- CSS --> <style type="text/css"> #demo { margin:0; padding:0; } #demo dl { margin:5px 0; padding:0; clear:both; } #demo dt { margin:0; padding:3px; width:120px; height:90px; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; border:1px solid #ccc; float:left; clear:both; overflow:hidden; } #demo dt img { overflow:hidden; width:120px; height:90px; } #demo dd { margin:0 0 0 140px; padding:0; } #demo dd div.title { font-size:110%; font-weight:bold; } #demo dd span { color:#ff6699; font-weight:bold; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <h2>「オムライス」でYouTube動画を検索した結果を10件取得して表示。</h2> <!-- CODE --> <div id="load"><img src='/content/img/ajax/loadingIcon.gif'></div> <div id="demo"></div> <!-- / CODE --> </div> </body> </html>
動画検索のクエリ パラメータ「start-index」
取得位置指定
2011/1/9
動画検索結果の取得開始位置を指定する場合は、URLに「start-index」パラメータを付加します。 先頭は1始まりです。
サンプルでは、「start-index=50」と「max-results=10」をURLに付加し、 「オムライス」でYouTube動画を検索した結果の50件目~60件目を取得して表示しています。
http://gdata.youtube.com/feeds/api/videos? vq=オムライス&start-index=50&max-results=10&alt=json

<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script> <script type="text/javascript"> $(function() { var isIE=false; if(navigator.userAgent.toLowerCase().indexOf("msie")!=-1) isIE=true; if(isIE){ var url="http://gdata.youtube.com/feeds/api/videos?vq=オムライス&start-index=50&max-results=10&alt=json-in-script&callback=getList"; var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.setAttribute("src", url); document.getElementsByTagName("head")[0].appendChild(script); //$("head").append(script); これはだめ }else{ $.getJSON( "http://gdata.youtube.com/feeds/api/videos", { "vq":"オムライス", "start-index":50, "max-results":10, "alt":"json" }, function(xml) { getList(xml); } ); } }); /* 日付フォーマット */ var formatDate = function(dateString) { /* var d = new Date(dateString); var day = d.getDate(); var month = d.getMonth()+1; var year = d.getFullYear(); */ var dary=dateString.split("-"); var year=dary[0]; var month=dary[1]; var day=dary[2].substring(0,2); return year+"年"+month+"月"+day+"日"; } /* 3桁区切り */ function addFigure(str) { var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } function getList(xml){ $('#load').fadeOut(); var feed = xml.feed; $.each(feed.entry, function(i,item){ var tmp=item.id.$t.split("video:"); var vid=tmp[tmp.length-1]; var s=''; s+='<dt><img src="'+item.media$group.media$thumbnail[0].url+'" /></dt>'; s+='<dd>'; s+='<div class="title"><a href="'+item.link[0].href+'">'+item.title.$t+'</a></div>'; s+='<p>'; s+='作成者:<a href="http://www.youtube.com/user/'+item.author[0].name.$t+'">'+item.author[0].name.$t+'</a>|'; s+='公開日:'+formatDate(item.published.$t)+'|'; s+='再生回数:'+addFigure(item.yt$statistics.viewCount)+'回'; s+='</p>'; s+='</dd>'; $("#demo").append('<dl class="video cf">'+s+'</dl>'); $(".video").fadeIn(1000); }); } </script> <!-- CSS --> <style type="text/css"> #demo { margin:0; padding:0; } #demo dl { margin:5px 0; padding:0; clear:both; } #demo dt { margin:0; padding:3px; width:120px; height:90px; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; border:1px solid #ccc; float:left; clear:both; overflow:hidden; } #demo dt img { overflow:hidden; width:120px; height:90px; } #demo dd { margin:0 0 0 140px; padding:0; } #demo dd div.title { font-size:110%; font-weight:bold; } #demo dd span { color:#ff6699; font-weight:bold; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <h2>「オムライス」でYouTube動画を検索した結果の50件目~60件目を取得して表示。</h2> <!-- CODE --> <div id="load"><img src='/content/img/ajax/loadingIcon.gif'></div> <div id="demo"></div> <!-- / CODE --> </div> </body> </html>
動画検索のクエリ パラメータ「lr」
地域指定
2011/1/9
特定の言語でタイトル、説明、キーワードが設定されている動画を取得する場合は、URLに「lr」パラメータを付加します。 指定可能な値は、ISO 639-1の2文字の言語コードです。 日本なら「lr=ja」、フランスなら「lr=fr」になります。
http://gdata.youtube.com/feeds/api/videos?lr={言語コード}
サンプルでは、フランス言語でアップされたYouTube動画の中から「子犬」(chien)で動画を検索した結果を取得して表示しています。
http://gdata.youtube.com/feeds/api/videos? lr=fr&time=today&alt=json

<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script> <script type="text/javascript"> $(function() { var isIE=false; if(navigator.userAgent.toLowerCase().indexOf("msie")!=-1) isIE=true; if(isIE){ var url="http://gdata.youtube.com/feeds/api/videos?vq=chien&lr=fr&alt=json-in-script&callback=getList"; var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.setAttribute("src", url); document.getElementsByTagName("head")[0].appendChild(script); //$("head").append(script); これはだめ }else{ $.getJSON( "http://gdata.youtube.com/feeds/api/videos", { "vq":"chien", /* 子犬 */ "lr":"fr", /* フランス言語 */ "alt":"json" }, function(xml) { getList(xml); } ); } }); /* 日付フォーマット */ var formatDate = function(dateString) { /* var d = new Date(dateString); var day = d.getDate(); var month = d.getMonth()+1; var year = d.getFullYear(); */ var dary=dateString.split("-"); var year=dary[0]; var month=dary[1]; var day=dary[2].substring(0,2); return year+"年"+month+"月"+day+"日"; } /* 3桁区切り */ function addFigure(str) { var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } function getList(xml){ $('#load').fadeOut(); var feed = xml.feed; $.each(feed.entry, function(i,item){ var tmp=item.id.$t.split("video:"); var vid=tmp[tmp.length-1]; var s=''; s+='<dt><img src="'+item.media$group.media$thumbnail[0].url+'" /></dt>'; s+='<dd>'; s+='<div class="title"><a href="'+item.link[0].href+'">'+item.title.$t+'</a></div>'; s+='<p>'; s+='作成者:<a href="http://www.youtube.com/user/'+item.author[0].name.$t+'">'+item.author[0].name.$t+'</a>|'; s+='公開日:'+formatDate(item.published.$t)+'|'; s+='再生回数:'+addFigure(item.yt$statistics.viewCount)+'回'; s+='</p>'; s+='</dd>'; $("#demo").append('<dl class="video cf">'+s+'</dl>'); $(".video").fadeIn(1000); }); } </script> <!-- CSS --> <style type="text/css"> #demo { margin:0; padding:0; } #demo dl { margin:5px 0; padding:0; clear:both; } #demo dt { margin:0; padding:3px; width:120px; height:90px; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; border:1px solid #ccc; float:left; clear:both; overflow:hidden; } #demo dt img { overflow:hidden; width:120px; height:90px; } #demo dd { margin:0 0 0 140px; padding:0; } #demo dd div.title { font-size:110%; font-weight:bold; } #demo dd span { color:#ff6699; font-weight:bold; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <h2>フランス言語でアップされたYouTube動画の中から、「子犬」(chien)で動画を検索した結果を表示。</h2> <!-- CODE --> <div id="load"><img src='/content/img/ajax/loadingIcon.gif'></div> <div id="demo"></div> <!-- / CODE --> </div> </body> </html>
動画検索のクエリ パラメータ「orderby」
動画の並び替え
2011/1/9
動画を並び替えて取得する場合は、URLに「orderby」パラメータを付加します。 指定可能な値は、relevance(関連度が高い順)、published(公開日順)、viewCount(再生回数順)、rating(評価が高い順)の4種類です。
http://gdata.youtube.com/feeds/api/videos? orderby={relevance|published|viewCount|rating}
サンプルでは、「オムライス」でYouTube動画を検索した結果を評価が高い順に取得して表示しています。
http://gdata.youtube.com/feeds/api/videos? orderby=rating&vq=オムライス&alt=json

<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script> <script type="text/javascript"> $(function() { var isIE=false; if(navigator.userAgent.toLowerCase().indexOf("msie")!=-1) isIE=true; if(isIE){ var url="http://gdata.youtube.com/feeds/api/videos?vq=オムライス&orderby=rating&alt=json-in-script&callback=getList"; var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.setAttribute("src", url); document.getElementsByTagName("head")[0].appendChild(script); //$("head").append(script); これはだめ }else{ $.getJSON( "http://gdata.youtube.com/feeds/api/videos", { "vq":"オムライス", "orderby":"rating", /* 評価が高い順 */ "alt":"json" }, function(xml) { getList(xml); } ); } }); /* 日付フォーマット */ var formatDate = function(dateString) { /* var d = new Date(dateString); var day = d.getDate(); var month = d.getMonth()+1; var year = d.getFullYear(); */ var dary=dateString.split("-"); var year=dary[0]; var month=dary[1]; var day=dary[2].substring(0,2); return year+"年"+month+"月"+day+"日"; } /* 3桁区切り */ function addFigure(str) { var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } function getList(xml){ $('#load').fadeOut(); var feed = xml.feed; $.each(feed.entry, function(i,item){ var tmp=item.id.$t.split("video:"); var vid=tmp[tmp.length-1]; var s=''; s+='<dt><img src="'+item.media$group.media$thumbnail[0].url+'" /></dt>'; s+='<dd>'; s+='<div class="title"><a href="'+item.link[0].href+'">'+item.title.$t+'</a></div>'; s+='<p>'; s+='作成者:<a href="http://www.youtube.com/user/'+item.author[0].name.$t+'">'+item.author[0].name.$t+'</a>|'; s+='公開日:'+formatDate(item.published.$t)+'|'; s+='再生回数:'+addFigure(item.yt$statistics.viewCount)+'回'; s+='</p>'; s+='</dd>'; $("#demo").append('<dl class="video cf">'+s+'</dl>'); $(".video").fadeIn(1000); }); } </script> <!-- CSS --> <style type="text/css"> #demo { margin:0; padding:0; } #demo dl { margin:5px 0; padding:0; clear:both; } #demo dt { margin:0; padding:3px; width:120px; height:90px; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; border:1px solid #ccc; float:left; clear:both; overflow:hidden; } #demo dt img { overflow:hidden; width:120px; height:90px; } #demo dd { margin:0 0 0 140px; padding:0; } #demo dd div.title { font-size:110%; font-weight:bold; } #demo dd span { color:#ff6699; font-weight:bold; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <h2>「オムライス」でYouTube動画を検索した結果を評価が高い順に表示。</h2> <!-- CODE --> <div id="load"><img src='/content/img/ajax/loadingIcon.gif'></div> <div id="demo"></div> <!-- / CODE --> </div> </body> </html>
動画検索のクエリ パラメータ「time」
アップされた期間指定
2011/1/9
特定の期間にアップされた動画を取得する場合は、URLに「time」パラメータを付加します。 指定可能な値は、today(1日)、this_week(7日)、this_month(1ヶ月)、all_time(全期間)の4種類です。 このパラメータは標準フィード(top_rated、top_favorites、most_viewed、most_discussed、most_linked、most_responded)のみ指定可能です。
標準フィード? time={today|this_week|this_month|all_time}
サンプルでは、YouTubeで評価の高い日本語の動画フィードから、今月アップされた動画を取得して表示しています。
http://gdata.youtube.com/feeds/api/standardfeeds/JP/top_rated? time=this_week&v=2&alt=json

<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script> <script type="text/javascript"> $(function() { var isIE=false; if(navigator.userAgent.toLowerCase().indexOf("msie")!=-1) isIE=true; if(isIE){ var url="http://gdata.youtube.com/feeds/api/videos?time=this_month&v=2&alt=json-in-script&callback=getList"; var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.setAttribute("src", url); document.getElementsByTagName("head")[0].appendChild(script); //$("head").append(script); これはだめ }else{ $.getJSON( "http://gdata.youtube.com/feeds/api/standardfeeds/JP/top_rated", /* 日本 */ { "time":"this_month", "v":2, "alt":"json" }, function(xml) { getList(xml); } ); } }); /* 日付フォーマット */ var formatDate = function(dateString) { /* var d = new Date(dateString); var day = d.getDate(); var month = d.getMonth()+1; var year = d.getFullYear(); */ var dary=dateString.split("-"); var year=dary[0]; var month=dary[1]; var day=dary[2].substring(0,2); return year+"年"+month+"月"+day+"日"; } /* 3桁区切り */ function addFigure(str) { var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } function getList(xml){ $('#load').fadeOut(); var feed = xml.feed; $.each(feed.entry, function(i,item){ var tmp=item.id.$t.split("video:"); var vid=tmp[tmp.length-1]; var s=''; s+='<dt><img src="http://img.youtube.com/vi/'+vid+'/2.jpg" /></dt>'; s+='<dd>'; s+='<div class="title"><a href="'+item.link[0].href+'">'+item.title.$t+'</a></div>'; s+='<p>'; s+='作成者:<a href="http://www.youtube.com/user/'+item.author[0].name.$t+'">'+item.author[0].name.$t+'</a>|'; s+='公開日:'+formatDate(item.published.$t)+''; s+='<br>'; if(item.gd$rating){ s+='評価平均:'+item.gd$rating.average+'|'; } if(item.yt$statistics){ s+='再生回数:'+addFigure(item.yt$statistics.viewCount)+'回'; } s+='</p>'; s+='</dd>'; $("#demo").append('<dl class="video cf">'+s+'</dl>'); $(".video").fadeIn(1000); }); } </script> <!-- CSS --> <style type="text/css"> #demo { margin:0; padding:0; } #demo dl { margin:5px 0; padding:0; clear:both; } #demo dt { margin:0; padding:3px; width:120px; height:90px; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; border:1px solid #ccc; float:left; clear:both; overflow:hidden; } #demo dt img { overflow:hidden; width:120px; height:90px; } #demo dd { margin:0 0 0 140px; padding:0; } #demo dd div.title { font-size:110%; font-weight:bold; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <h2>YouTubeで評価の高い日本語の動画フィードから、今月アップされた動画を取得して表示。</h2> <!-- CODE --> <div id="load"><img src='/content/img/ajax/loadingIcon.gif'></div> <div id="demo"></div> <!-- / CODE --> </div> </body> </html>
標準フィード:「評価の高い動画フィード」を取得して表示
top_rated
2011/1/9
YouTube動画の標準フィード「評価の高い動画フィード」を取得します。
http://gdata.youtube.com/feeds/api/standardfeeds/top_rated
サンプルでは、日本で評価の高い動画フィードをjQueryのgetJSON()を使用して取得し、 動画のサムネイル、タイトル、リンク先、作成者、公開日、評価平均、再生回数などを表示しています。 日本語のフィードのみ取得する場合はAPIに「JP」を付加します。 フィードをJSON形式で受け取る場合は「alt」パラメータに"json"を指定します(デフォルトはXML形式)。
http://gdata.youtube.com/feeds/api/standardfeeds/JP/top_rated?v=2&alt=json

<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script> <script type="text/javascript"> $(function() { var isIE=false; if(navigator.userAgent.toLowerCase().indexOf("msie")!=-1) isIE=true; if(isIE){ var url="http://gdata.youtube.com/feeds/api/standardfeeds/JP/top_rated?v=2&alt=json-in-script&callback=getList"; var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.setAttribute("src", url); document.getElementsByTagName("head")[0].appendChild(script); //$("head").append(script); これはだめ }else{ $.getJSON( "http://gdata.youtube.com/feeds/api/standardfeeds/JP/top_rated", /* 日本 */ { v:2, alt:"json" }, function(xml) { getList(xml); } ); } }); /* 日付フォーマット */ var formatDate = function(dateString) { /* var d = new Date(dateString); var day = d.getDate(); var month = d.getMonth()+1; var year = d.getFullYear(); */ var dary=dateString.split("-"); var year=dary[0]; var month=dary[1]; var day=dary[2].substring(0,2); return year+"年"+month+"月"+day+"日"; } /* 3桁区切り */ function addFigure(str) { var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } function getList(xml){ $('#load').fadeOut(); var feed = xml.feed; $.each(feed.entry, function(i,item){ var tmp=item.id.$t.split("video:"); var vid=tmp[tmp.length-1]; var s=''; s+='<dt><img src="http://img.youtube.com/vi/'+vid+'/2.jpg" /></dt>'; s+='<dd>'; s+='<div class="title"><a href="'+item.link[0].href+'">'+item.title.$t+'</a></div>'; s+='<p>'; s+='作成者:<a href="http://www.youtube.com/user/'+item.author[0].name.$t+'">'+item.author[0].name.$t+'</a>|'; s+='公開日:'+formatDate(item.published.$t)+''; s+='<br>'; if(item.gd$rating){ s+='評価平均:'+item.gd$rating.average+'|'; } if(item.yt$statistics){ s+='再生回数:'+addFigure(item.yt$statistics.viewCount)+'回'; } s+='</p>'; s+='</dd>'; $("#demo").append('<dl class="video cf">'+s+'</dl>'); $(".video").fadeIn(1000); }); } </script> <!-- CSS --> <style type="text/css"> #demo { margin:0; padding:0; } #demo dl { margin:5px 0; padding:0; clear:both; } #demo dt { margin:0; padding:3px; width:120px; height:90px; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; border:1px solid #ccc; float:left; clear:both; overflow:hidden; } #demo dt img { overflow:hidden; width:120px; height:90px; } #demo dd { margin:0 0 0 140px; padding:0; } #demo dd div.title { font-size:110%; font-weight:bold; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <h2>日本で評価の高いYouTube動画フィードを取得して表示。</h2> <!-- CODE --> <div id="load"><img src='/content/img/ajax/loadingIcon.gif'></div> <div id="demo"></div> <!-- / CODE --> </div> </body> </html>
標準フィード:「お気に入り登録の多い動画フィード」を取得して表示
top_favorites
2011/1/9
YouTube動画の標準フィード「お気に入り登録の多い動画フィード」を取得します。
http://gdata.youtube.com/feeds/api/standardfeeds/top_favorites
サンプルでは、日本でお気に入り登録の多い動画フィードをjQueryのgetJSON()を使用して取得し、 動画のサムネイル、タイトル、リンク先、作成者、公開日、評価平均、再生回数などを表示しています。 地域を日本に設定するには、標準フィードのURLにregionID「JP」を挿入します。
http://gdata.youtube.com/feeds/api/standardfeeds/JP/top_favorites?v=2&alt=json

<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script> <script type="text/javascript"> $(function() { var isIE=false; if(navigator.userAgent.toLowerCase().indexOf("msie")!=-1) isIE=true; if(isIE){ var url="http://gdata.youtube.com/feeds/api/standardfeeds/JP/top_favorites?v=2&alt=json-in-script&callback=getList"; var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.setAttribute("src", url); document.getElementsByTagName("head")[0].appendChild(script); //$("head").append(script); これはだめ }else{ $.getJSON( "http://gdata.youtube.com/feeds/api/standardfeeds/JP/top_favorites", /* 日本 */ { v:2, alt:"json" }, function(xml) { getList(xml); } ); } }); /* 日付フォーマット */ var formatDate = function(dateString) { /* var d = new Date(dateString); var day = d.getDate(); var month = d.getMonth()+1; var year = d.getFullYear(); */ var dary=dateString.split("-"); var year=dary[0]; var month=dary[1]; var day=dary[2].substring(0,2); return year+"年"+month+"月"+day+"日"; } /* 3桁区切り */ function addFigure(str) { var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } function getList(xml){ $('#load').fadeOut(); var feed = xml.feed; $.each(feed.entry, function(i,item){ var tmp=item.id.$t.split("video:"); var vid=tmp[tmp.length-1]; var s=''; s+='<dt><img src="http://img.youtube.com/vi/'+vid+'/2.jpg" /></dt>'; s+='<dd>'; s+='<div class="title"><a href="'+item.link[0].href+'">'+item.title.$t+'</a></div>'; s+='<p>'; s+='作成者:<a href="http://www.youtube.com/user/'+item.author[0].name.$t+'">'+item.author[0].name.$t+'</a>|'; s+='公開日:'+formatDate(item.published.$t)+''; s+='<br>'; s+='評価平均:'+item.gd$rating.average+'|'; s+='<span>お気に入り登録数:'+addFigure(item.yt$statistics.favoriteCount)+'</span>|' s+='再生回数:'+addFigure(item.yt$statistics.viewCount)+'回'; s+='</p>'; s+='</dd>'; $("#demo").append('<dl class="video cf">'+s+'</dl>'); $(".video").fadeIn(1000); }); } </script> <!-- CSS --> <style type="text/css"> #demo { margin:0; padding:0; } #demo dl { margin:5px 0; padding:0; clear:both; } #demo dt { margin:0; padding:3px; width:120px; height:90px; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; border:1px solid #ccc; float:left; clear:both; overflow:hidden; } #demo dt img { overflow:hidden; width:120px; height:90px; } #demo dd { margin:0 0 0 140px; padding:0; } #demo dd div.title { font-size:110%; font-weight:bold; } #demo dd span { color:#ff6699; font-weight:bold; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <h2>日本でお気に入り登録の多いYouTube動画フィードを取得して表示。</h2> <!-- CODE --> <div id="load"><img src='/content/img/ajax/loadingIcon.gif'></div> <div id="demo"></div> <!-- / CODE --> </div> </body> </html>
標準フィード:「人気の動画フィード」を取得して表示
most_viewed
2011/1/9
YouTube動画の標準フィード「人気の動画フィード」を取得します。
http://gdata.youtube.com/feeds/api/standardfeeds/most_viewed
サンプルでは、日本で人気の動画フィードをjQueryのgetJSON()を使用して取得し、 動画のサムネイル、タイトル、リンク先、作成者、公開日、評価平均、再生回数などを表示しています。 地域を日本に設定するには、標準フィードのURLにregionID「JP」を挿入します。
http://gdata.youtube.com/feeds/api/standardfeeds/JP/most_viewed?v=2&alt=json

<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script> <script type="text/javascript"> $(function() { var isIE=false; if(navigator.userAgent.toLowerCase().indexOf("msie")!=-1) isIE=true; if(isIE){ var url="http://gdata.youtube.com/feeds/api/standardfeeds/JP/most_viewed?v=2&alt=json-in-script&callback=getList"; var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.setAttribute("src", url); document.getElementsByTagName("head")[0].appendChild(script); //$("head").append(script); これはだめ }else{ $.getJSON( "http://gdata.youtube.com/feeds/api/standardfeeds/JP/most_viewed", /* 日本 */ { v:2, alt:"json" }, function(xml) { getList(xml); } ); } }); /* 日付フォーマット */ var formatDate = function(dateString) { /* var d = new Date(dateString); var day = d.getDate(); var month = d.getMonth()+1; var year = d.getFullYear(); */ var dary=dateString.split("-"); var year=dary[0]; var month=dary[1]; var day=dary[2].substring(0,2); return year+"年"+month+"月"+day+"日"; } /* 3桁区切り */ function addFigure(str) { var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } function getList(xml){ $('#load').fadeOut(); var feed = xml.feed; $.each(feed.entry, function(i,item){ var tmp=item.id.$t.split("video:"); var vid=tmp[tmp.length-1]; var s=''; s+='<dt><img src="http://img.youtube.com/vi/'+vid+'/2.jpg" /></dt>'; s+='<dd>'; s+='<div class="title"><a href="'+item.link[0].href+'">'+item.title.$t+'</a></div>'; s+='<p>'; s+='作成者:<a href="http://www.youtube.com/user/'+item.author[0].name.$t+'">'+item.author[0].name.$t+'</a>|'; s+='公開日:'+formatDate(item.published.$t)+''; s+='<br>'; if(item.gd$rating){ s+='評価平均:'+item.gd$rating.average+'|'; } if(item.yt$statistics){ s+='お気に入り登録数:'+addFigure(item.yt$statistics.favoriteCount)+'|'; s+='<span>再生回数:'+addFigure(item.yt$statistics.viewCount)+'回</span>'; } s+='</p>'; s+='</dd>'; $("#demo").append('<dl class="video cf">'+s+'</dl>'); $(".video").fadeIn(1000); }); } </script> <!-- CSS --> <style type="text/css"> #demo { margin:0; padding:0; } #demo dl { margin:5px 0; padding:0; clear:both; } #demo dt { margin:0; padding:3px; width:120px; height:90px; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; border:1px solid #ccc; float:left; clear:both; overflow:hidden; } #demo dt img { overflow:hidden; width:120px; height:90px; } #demo dd { margin:0 0 0 140px; padding:0; } #demo dd div.title { font-size:110%; font-weight:bold; } #demo dd span { color:#ff6699; font-weight:bold; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <h2>日本で人気のあるYouTube動画フィードを取得して表示。</h2> <!-- CODE --> <div id="load"><img src='/content/img/ajax/loadingIcon.gif'></div> <div id="demo"></div> <!-- / CODE --> </div> </body> </html>
標準フィード:「新着動画フィード」を取得して表示
most_recent
2011/1/9
YouTube動画の標準フィード「新着動画フィード」を取得します。
http://gdata.youtube.com/feeds/api/standardfeeds/most_recent
サンプルでは、日本の新着動画フィードをjQueryのgetJSON()を使用して取得し、 動画のサムネイル、タイトル、リンク先、作成者、公開日などを表示しています。 地域を日本に設定するには、標準フィードのURLにregionID「JP」を挿入します。
http://gdata.youtube.com/feeds/api/standardfeeds/JP/most_recent?v=2&alt=json

<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script> <script type="text/javascript"> $(function() { var isIE=false; if(navigator.userAgent.toLowerCase().indexOf("msie")!=-1) isIE=true; if(isIE){ var url="http://gdata.youtube.com/feeds/api/standardfeeds/JP/most_recent?v=2&alt=json-in-script&callback=getList"; var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.setAttribute("src", url); document.getElementsByTagName("head")[0].appendChild(script); //$("head").append(script); これはだめ }else{ $.getJSON( "http://gdata.youtube.com/feeds/api/standardfeeds/JP/most_recent", /* 日本 */ { v:2, alt:"json" }, function(xml) { getList(xml); } ); } }); /* IE判定 */ var browser = function() { var ua = navigator.userAgent; return { ie: ua.match(/MSIE\s([^;]*)/) }; }(); /* 日付フォーマット */ var timeAgo = function(dateString) { var rightNow = new Date(); var then = new Date(dateString); var isIE=0; if(navigator.userAgent.toLowerCase().indexOf("msie")!=-1) isIE=1; if (isIE) { var dary=dateString.split("-"); var year=dary[0]; var month=dary[1]; var day=dary[2].substring(0,2); var _tary=dateString.split("T"); var tary=_tary[1].split(":"); var hh=tary[0]; var mm=tary[1]; var ss=tary[2].substring(0,2); var _rightNow=""+rightNow.getFullYear()+"/"+rightNow.getMonth()+"/"+rightNow.getDate()+" "+rightNow.getHours()+":"+rightNow.getMinutes()+":"+rightNow.getSeconds(); var _then=""+year+"/"+(month-1)+"/"+day+" "+hh+":"+mm+":"+ss; var rightNow=new Date(_rightNow).getTime(); var then=new Date(_then).getTime()+9*60*60*1000; //GMT9:00 } var diff = rightNow - then; var second = 1000, minute = second * 60, hour = minute * 60, day = hour * 24, week = day * 7; if (isNaN(diff) || diff < 0) { return ""; // return blank string if unknown } if(diff < second * 2) return "いまさっき"; if(diff < minute) return Math.floor(diff/second)+"秒前"; if(diff < minute * 2) return "約1分前"; if(diff < hour) return Math.floor(diff/minute)+"分前"; if(diff < hour * 2) return "約1時間前"; if(diff < day) return Math.floor(diff/hour)+"時間前"; if(diff > day && diff < day * 2) return "きのう"; if(diff < day * 365){ return Math.floor(diff/day)+"日前"; }else{ return "1年以上前"; } } /* 3桁区切り */ function addFigure(str) { var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } function getList(xml){ $('#load').fadeOut(); var feed = xml.feed; $.each(feed.entry, function(i,item){ var tmp=item.id.$t.split("video:"); var vid=tmp[tmp.length-1]; var s=''; s+='<dt><img src="http://img.youtube.com/vi/'+vid+'/2.jpg" /></dt>'; s+='<dd>'; s+='<div class="title"><a href="'+item.link[0].href+'">'+item.title.$t+'</a></div>'; s+='<p>'; s+='作成者:<a href="http://www.youtube.com/user/'+item.author[0].name.$t+'">'+item.author[0].name.$t+'</a>|'; s+='<span>公開日:'+timeAgo(item.published.$t)+'</span>'; s+='</p>'; s+='</dd>'; $("#demo").append('<dl class="video cf">'+s+'</dl>'); $(".video").fadeIn(1000); }); } </script> <!-- CSS --> <style type="text/css"> #demo { margin:0; padding:0; } #demo dl { margin:5px 0; padding:0; clear:both; } #demo dt { margin:0; padding:3px; width:120px; height:90px; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; border:1px solid #ccc; float:left; clear:both; overflow:hidden; } #demo dt img { overflow:hidden; width:120px; height:90px; } #demo dd { margin:0 0 0 140px; padding:0; } #demo dd div.title { font-size:110%; font-weight:bold; } #demo dd span { color:#ff6699; font-weight:bold; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <h2>日本の新着YouTube動画フィードを取得して表示。</h2> <!-- CODE --> <div id="load"><img src='/content/img/ajax/loadingIcon.gif'></div> <div id="demo"></div> <!-- / CODE --> </div> </body> </html>
標準フィード:「話題の動画フィード」を取得して表示
most_discussed
2011/1/9
YouTube動画の標準フィード「話題の動画フィード」を取得します。
http://gdata.youtube.com/feeds/api/standardfeeds/most_discussed?v=2&alt=json
jQueryのgetJSON()を使用してフィードをJSON形式で取得し、動画のサムネイル、タイトル、リンク先、作成者、公開日、評価平均、再生回数などを表示してみました。
サンプルでは、今日、日本で話題の動画をjQueryのgetJSON()を使用して取得し、 動画のサムネイル、タイトル、リンク先、作成者、公開日などを表示しています。 今日のデータのみ取得するには、パラメータに「time=today」を付加し、 地域を日本に設定するには、標準フィードのURLにregionID「JP」を挿入します。
http://gdata.youtube.com/feeds/api/standardfeeds/JP/most_discussed? time=today&v=2&alt=json

<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script> <script type="text/javascript"> $(function() { var isIE=false; if(navigator.userAgent.toLowerCase().indexOf("msie")!=-1) isIE=true; if(isIE){ var url="http://gdata.youtube.com/feeds/api/standardfeeds/JP/most_discussed?time=today&v=2&alt=json-in-script&callback=getList"; var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.setAttribute("src", url); document.getElementsByTagName("head")[0].appendChild(script); //$("head").append(script); これはだめ }else{ $.getJSON( "http://gdata.youtube.com/feeds/api/standardfeeds/JP/most_discussed", /* 日本 */ { time:"today", /* 今日 */ v:2, alt:"json" }, function(xml) { getList(xml); } ); } }); /* 日付フォーマット */ var formatDate = function(dateString) { /* var d = new Date(dateString); var day = d.getDate(); var month = d.getMonth()+1; var year = d.getFullYear(); */ var dary=dateString.split("-"); var year=dary[0]; var month=dary[1]; var day=dary[2].substring(0,2); return year+"年"+month+"月"+day+"日"; } /* 3桁区切り */ function addFigure(str) { var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } function getList(xml){ $('#load').fadeOut(); var feed = xml.feed; $.each(feed.entry, function(i,item){ var tmp=item.id.$t.split("video:"); var vid=tmp[tmp.length-1]; var s=''; s+='<dt><img src="http://img.youtube.com/vi/'+vid+'/2.jpg" /></dt>'; s+='<dd>'; s+='<div class="title"><a href="'+item.link[0].href+'">'+item.title.$t+'</a></div>'; s+='<p>'; s+='作成者:<a href="http://www.youtube.com/user/'+item.author[0].name.$t+'">'+item.author[0].name.$t+'</a>|'; s+='公開日:'+formatDate(item.published.$t)+''; s+='<br>'; if(item.gd$rating){ s+='評価平均:'+item.gd$rating.average+'|'; } if(item.yt$statistics){ s+='お気に入り登録数:'+addFigure(item.yt$statistics.favoriteCount)+'|'; s+='再生回数:'+addFigure(item.yt$statistics.viewCount)+'回'; } s+='</p>'; s+='</dd>'; $("#demo").append('<dl class="video cf">'+s+'</dl>'); $(".video").fadeIn(1000); }); } </script> <!-- CSS --> <style type="text/css"> #demo { margin:0; padding:0; } #demo dl { margin:5px 0; padding:0; clear:both; } #demo dt { margin:0; padding:3px; width:120px; height:90px; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; border:1px solid #ccc; float:left; clear:both; overflow:hidden; } #demo dt img { overflow:hidden; width:120px; height:90px; } #demo dd { margin:0 0 0 140px; padding:0; } #demo dd div.title { font-size:110%; font-weight:bold; } #demo dd span { color:#ff6699; font-weight:bold; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <h2>今日、日本で本日話題のYouTube動画フィードを取得して表示。</h2> <!-- CODE --> <div id="load"><img src='/content/img/ajax/loadingIcon.gif'></div> <div id="demo"></div> <!-- / CODE --> </div> </body> </html>
標準フィード:「コメントの多い動画フィード」を取得して表示
most_responded
2011/1/9
YouTube動画の標準フィード「コメントの多い動画」を取得します。
http://gdata.youtube.com/feeds/api/standardfeeds/most_responded
サンプルでは、今日、日本でコメントが多かった動画をjQueryのgetJSON()を使用して取得し、 動画のサムネイル、タイトル、リンク先、作成者、公開日などを表示しています。 本日のデータを取得するには、パラメータに「time=today」を付加し、 地域を日本に設定するには、標準フィードのURLにregionID「JP」を挿入します。
http://gdata.youtube.com/feeds/api/standardfeeds/JP/most_responded? time=today&v=2&alt=json

<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script> <script type="text/javascript"> $(function() { var isIE=false; if(navigator.userAgent.toLowerCase().indexOf("msie")!=-1) isIE=true; if(isIE){ var url="http://gdata.youtube.com/feeds/api/standardfeeds/JP/most_responded?time=today&v=2&alt=json-in-script&callback=getList"; var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.setAttribute("src", url); document.getElementsByTagName("head")[0].appendChild(script); //$("head").append(script); これはだめ }else{ $.getJSON( "http://gdata.youtube.com/feeds/api/standardfeeds/JP/most_responded", /* 日本 */ { time:"today", /* 今日 */ v:2, alt:"json" }, function(xml) { getList(xml); } ); } }); /* 日付フォーマット */ var formatDate = function(dateString) { /* var d = new Date(dateString); var day = d.getDate(); var month = d.getMonth()+1; var year = d.getFullYear(); */ var dary=dateString.split("-"); var year=dary[0]; var month=dary[1]; var day=dary[2].substring(0,2); return year+"年"+month+"月"+day+"日"; } /* 3桁区切り */ function addFigure(str) { var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } function getList(xml){ $('#load').fadeOut(); var feed = xml.feed; $.each(feed.entry, function(i,item){ var tmp=item.id.$t.split("video:"); var vid=tmp[tmp.length-1]; var s=''; s+='<dt><img src="http://img.youtube.com/vi/'+vid+'/2.jpg" /></dt>'; s+='<dd>'; s+='<div class="title"><a href="'+item.link[0].href+'">'+item.title.$t+'</a></div>'; s+='<p>'; s+='作成者:<a href="http://www.youtube.com/user/'+item.author[0].name.$t+'">'+item.author[0].name.$t+'</a>|'; s+='公開日:'+formatDate(item.published.$t)+''; s+='<br>'; if(item.gd$rating){ s+='評価平均:'+item.gd$rating.average+'|'; } if(item.yt$statistics){ s+='お気に入り登録数:'+addFigure(item.yt$statistics.favoriteCount)+'|' s+='再生回数:'+addFigure(item.yt$statistics.viewCount)+'回'; } if(item.gd$comments){ s+='<br>'; s+='<span>コメント数:'+addFigure(item.gd$comments.gd$feedLink.countHint)+'件</span>'; } s+='</p>'; s+='</dd>'; $("#demo").append('<dl class="video cf">'+s+'</dl>'); $(".video").fadeIn(1000); }); } </script> <!-- CSS --> <style type="text/css"> #demo { margin:0; padding:0; } #demo dl { margin:5px 0; padding:0; clear:both; } #demo dt { margin:0; padding:3px; width:120px; height:90px; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; border:1px solid #ccc; float:left; clear:both; overflow:hidden; } #demo dt img { overflow:hidden; width:120px; height:90px; } #demo dd { margin:0 0 0 140px; padding:0; } #demo dd div.title { font-size:110%; font-weight:bold; } #demo dd span { color:#ff6699; font-weight:bold; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <h2>今日、日本で本日コメントが多かったYouTube動画フィードを取得して表示。</h2> <!-- CODE --> <div id="load"><img src='/content/img/ajax/loadingIcon.gif'></div> <div id="demo"></div> <!-- / CODE --> </div> </body> </html>
標準フィード:「おすすめ動画フィード」を取得して表示
recently_featured
2011/1/9
YouTube動画の標準フィード「おすすめ動画フィード」を取得します。
http://gdata.youtube.com/feeds/api/standardfeeds/recently_featured
サンプルでは、日本でおすすめの動画フィードをjQueryのgetJSON()を使用して取得し、 動画のサムネイル、タイトル、リンク先、作成者、公開日などを表示しています。 地域を日本に設定するには、標準フィードのURLにregionID「JP」を挿入します。
http://gdata.youtube.com/feeds/api/standardfeeds/JP/recently_featured?v=2&alt=json

<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script> <script type="text/javascript"> $(function() { var isIE=false; if(navigator.userAgent.toLowerCase().indexOf("msie")!=-1) isIE=true; if(isIE){ var url="http://gdata.youtube.com/feeds/api/standardfeeds/JP/recently_featured?v=2&alt=json-in-script&callback=getList"; var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.setAttribute("src", url); document.getElementsByTagName("head")[0].appendChild(script); //$("head").append(script); これはだめ }else{ $.getJSON( "http://gdata.youtube.com/feeds/api/standardfeeds/JP/recently_featured", /* 日本 */ { v:2, alt:"json" }, function(xml) { getList(xml); } ); } }); /* 日付フォーマット */ var formatDate = function(dateString) { /* var d = new Date(dateString); var day = d.getDate(); var month = d.getMonth()+1; var year = d.getFullYear(); */ var dary=dateString.split("-"); var year=dary[0]; var month=dary[1]; var day=dary[2].substring(0,2); return year+"年"+month+"月"+day+"日"; } /* 3桁区切り */ function addFigure(str) { var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } function getList(xml){ $('#load').fadeOut(); var feed = xml.feed; $.each(feed.entry, function(i,item){ var tmp=item.id.$t.split("video:"); var vid=tmp[tmp.length-1]; var s=''; s+='<dt><img src="http://img.youtube.com/vi/'+vid+'/2.jpg" /></dt>'; s+='<dd>'; s+='<div class="title"><a href="'+item.link[0].href+'">'+item.title.$t+'</a></div>'; s+='<p>'; s+='作成者:<a href="http://www.youtube.com/user/'+item.author[0].name.$t+'">'+item.author[0].name.$t+'</a>|'; s+='公開日:'+formatDate(item.published.$t)+''; s+='<br>'; if(item.gd$rating){ s+='評価平均:'+item.gd$rating.average+'|'; } if(item.yt$statistics){ s+='お気に入り登録数:'+addFigure(item.yt$statistics.favoriteCount)+'|'; s+='再生回数:'+addFigure(item.yt$statistics.viewCount)+'回'; } s+='</p>'; s+='</dd>'; $("#demo").append('<dl class="video cf">'+s+'</dl>'); $(".video").fadeIn(1000); }); } </script> <!-- CSS --> <style type="text/css"> #demo { margin:0; padding:0; } #demo dl { margin:5px 0; padding:0; clear:both; } #demo dt { margin:0; padding:3px; width:120px; height:90px; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; border:1px solid #ccc; float:left; clear:both; overflow:hidden; } #demo dt img { overflow:hidden; width:120px; height:90px; } #demo dd { margin:0 0 0 140px; padding:0; } #demo dd div.title { font-size:110%; font-weight:bold; } #demo dd span { color:#ff6699; font-weight:bold; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <h2>日本でおすすめのYouTube動画フィードを取得して表示。</h2> <!-- CODE --> <div id="load"><img src='/content/img/ajax/loadingIcon.gif'></div> <div id="demo"></div> <!-- / CODE --> </div> </body> </html>
「ユーザーのお気に入りフィード」を取得して表示
favorites
2011/1/9
指定したユーザーがお気に入り登録している動画フィードを取得します。
http://gdata.youtube.com/feeds/api/users/ユーザー名/favorites
サンプルでは、「cocoism3」がお気に入り動画フィードをjQueryのgetJSON()を使用して取得し、お気に入りの動画情報を表示しています。 フィードをJSON形式で受け取る場合は「alt」パラメータに"json"を指定します(デフォルトはXML形式)。
http://gdata.youtube.com/feeds/api/users/cocoism3/favorites?alt=json

<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script> <script type="text/javascript"> $(function() { var isIE=false; if(navigator.userAgent.toLowerCase().indexOf("msie")!=-1) isIE=true; if(isIE){ var url="http://gdata.youtube.com/feeds/api/users/cocoism3/favorites?alt=json-in-script&callback=getList"; var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.setAttribute("src", url); document.getElementsByTagName("head")[0].appendChild(script); //$("head").append(script); これはだめ }else{ $.getJSON( "http://gdata.youtube.com/feeds/api/users/cocoism3/favorites", { alt:"json" }, function(xml) { getList(xml); } ); } }); /* 日付フォーマット */ var formatDate = function(dateString) { /* var d = new Date(dateString); var day = d.getDate(); var month = d.getMonth()+1; var year = d.getFullYear(); */ var dary=dateString.split("-"); var year=dary[0]; var month=dary[1]; var day=dary[2].substring(0,2); return year+"年"+month+"月"+day+"日"; } /* 3桁区切り */ function addFigure(str) { var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } function getList(xml){ $('#load').fadeOut(); var feed = xml.feed; $.each(feed.entry, function(i,item){ var tmp=item.id.$t.split("video:"); var vid=tmp[tmp.length-1]; var s=""; s+='<dt><img src="'+item.media$group.media$thumbnail[0].url+'" /></dt>'; s+='<dd>'; s+='<div class="title"><a href="'+item.link[0].href+'">'+item.title.$t+'</a></div>'; s+='<p>'; s+='作成者:<a href="http://www.youtube.com/user/'+item.author[0].name.$t+'">'+item.author[0].name.$t+'</a>|'; s+='公開日:'+formatDate(item.published.$t)+''; s+='<br>'; if(item.gd$rating){ s+='評価平均:'+item.gd$rating.average+'|'; } if(item.yt$statistics){ s+='お気に入り登録数:'+addFigure(item.yt$statistics.favoriteCount)+'|'; s+='再生回数:'+addFigure(item.yt$statistics.viewCount)+'回'; } s+='</p>'; s+='</dd>'; $("#demo").append('<dl class="video cf">'+s+'</dl>'); $(".video").fadeIn(1000); }); } </script> <!-- CSS --> <style type="text/css"> #demo { margin:0; padding:0; } #demo dl { margin:5px 0; padding:0; clear:both; } #demo dt { margin:0; padding:3px; width:120px; height:90px; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; border:1px solid #ccc; float:left; clear:both; overflow:hidden; } #demo dt img { overflow:hidden; width:120px; height:90px; } #demo dd { margin:0 0 0 140px; padding:0; } #demo dd div.title { font-size:110%; font-weight:bold; } #demo dd span { color:#ff6699; font-weight:bold; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <h2>指定したユーザーのお気に入り動画リストを取得して表示</h2> <!-- CODE --> <div id="load"><img src='/content/img/ajax/loadingIcon.gif'></div> <div id="demo"></div> <!-- / CODE --> </div> </body> </html>
「再生リストフィード」を取得して表示
playlists
2011/1/9
指定した再生リストの動画フィードを取得します。
http://gdata.youtube.com/feeds/api/playlists/再生リストID
サンプルでは、「cocoism3」がお気に入り動画フィードをjQueryのgetJSON()を使用して取得し、お気に入りの動画情報を表示しています。 フィードをJSON形式で受け取る場合は「alt」パラメータに"json"を指定します(デフォルトはXML形式)。
http://gdata.youtube.com/feeds/api/playlists/DB3B64C6FB440EFE?alt=json

<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script> <script type="text/javascript"> $(function() { var isIE=false; if(navigator.userAgent.toLowerCase().indexOf("msie")!=-1) isIE=true; if(isIE){ var url="http://gdata.youtube.com/feeds/api/playlists/DB3B64C6FB440EFE?alt=json-in-script&callback=getList"; var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.setAttribute("src", url); document.getElementsByTagName("head")[0].appendChild(script); //$("head").append(script); これはだめ }else{ $.getJSON( "http://gdata.youtube.com/feeds/api/playlists/DB3B64C6FB440EFE", { alt:"json" }, function(xml) { getList(xml); } ); } }); /* 日付フォーマット */ var formatDate = function(dateString) { /* var d = new Date(dateString); var day = d.getDate(); var month = d.getMonth()+1; var year = d.getFullYear(); */ var dary=dateString.split("-"); var year=dary[0]; var month=dary[1]; var day=dary[2].substring(0,2); return year+"年"+month+"月"+day+"日"; } /* 3桁区切り */ function addFigure(str) { var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } function getList(xml){ $('#load').fadeOut(); var feed = xml.feed; $.each(feed.entry, function(i,item){ var tmp=item.id.$t.split("video:"); var vid=tmp[tmp.length-1]; var s=''; s+='<dt><img src="'+item.media$group.media$thumbnail[0].url+'" /></dt>'; s+='<dd>'; s+='<div class="title"><a href="'+item.link[0].href+'">'+item.title.$t+'</a></div>'; s+='<p>'+item.content.$t+'</p>'; s+='</dd>'; $("#demo").append('<dl class="video cf">'+s+'</dl>'); $(".video").fadeIn(1000); }); $("#demo").prepend("<h3>☆"+feed.title.$t+"☆</h3>"); } </script> <!-- CSS --> <style type="text/css"> #demo { margin:0; padding:0; } #demo dl { margin:5px 0; padding:0; clear:both; } #demo dt { margin:0; padding:3px; width:120px; height:90px; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; border:1px solid #ccc; float:left; clear:both; overflow:hidden; } #demo dt img { overflow:hidden; width:120px; height:90px; } #demo dd { margin:0 0 0 140px; padding:0; } #demo dd div.title { font-size:110%; font-weight:bold; } #demo dd span { color:#ff6699; font-weight:bold; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <h2>指定した再生リストを取得して表示</h2> <!-- CODE --> <div id="load"><img src='/content/img/ajax/loadingIcon.gif'></div> <div id="demo"></div> <!-- / CODE --> </div> </body> </html>

<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script> <script type="text/javascript" src="/content/lib/jquery/jquery.youtubeplaylist_custom.js" ></script> <script type="text/javascript"> $(function() { $("#ytplist").ytplaylist({plistID:"AB5B3DE9830F41A5"}); }); </script> <!-- CSS --> <style type="text/css"> #yt_holder { margin:0 auto; padding:0; width:520px; overflow:hidden; } #yt_holder h3 { text-align:center; font-size:120%; margin:10px auto; padding:5px 0; background:#ccc; border:2px solid #ccc; } #ytvideo { width:520px; height:323px; overflow:hidden; margin:0 auto; padding:0; background:#000; } #ytplist-container { position: relative; text-align: left; width:520px; height:120px; margin:10px auto; padding:0; overflow:hidden; } #ytplist-container a.prev, #ytplist-container a.next { position:absolute; top:0px; width:17px; height:110px; overflow:hidden; text-indent:-9999px; background:transparent url(/content/img/strm/prev.png) no-repeat 0 0; display:block; } #ytplist-container a.next { background:transparent url(/content/img/strm/next.png) no-repeat 0 0; right:0; } #ytplist-container a.off { background-position:0 0; cursor:default; } #ytplist-container a.on { background-position:0 -110px; cursor:pointer; } #ytplist { position: relative; top:0; left:0; overflow: hidden; margin:0 0 0 19px; padding:0; width:500px; } #ytplist li { float:left; margin:0; padding:0; width:130px; height:110px; line-height:1; overflow:hidden; display: inline; } #ytplist li span { display:block; padding:5px; overflow:hidden; letter-spacing:-1px; } #ytplist li span a { font-size:80%; text-decoration:none; } #ytplist li a.thumb { position:relative; width:120px; height:68px; display:block; overflow:hidden; border:1px solid #ccc; text-indent:-9999px; } #ytplist li.current a.thumb { border:1px solid red; } #ytplist li a.thumb img { position: absolute; display: block; left: 0; top:-11px; width:120px; outline: none; -ms-interpolation-mode: bicubic; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <h2>指定した再生リストを取得して表示</h2> <!-- CODE --> <div id="yt_holder" class="cf"> <h3></h3> <div id="ytvideo"></div> <div id="ytplist-container"> <ul id="ytplist"></ul> <a href="#" class="prev off">←</a> <a href="#" class="next on">→</a> </div> </div><!-- #yt_holder --> <!-- / CODE --> </div> </body> </html>