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>
動画検索のクエリ パラメータ「author」
特定のユーザーを指定
2011/1/9
特定のユーザーがアップした動画を取得する場合は、URLに「author」パラメータを付加します。
http://gdata.youtube.com/feeds/api/videos?author=ユーザー名
サンプルでは、「cocoism3」がYouTubeにアップした動画を取得して表示しています。
http://gdata.youtube.com/feeds/api/videos? author=cocoism3&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&author=cocoism3&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",
{
author:"cocoism3",
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 -->
<h3>☆cocoism3がアップした動画☆</h3>
<div id="load"><img src='/content/img/ajax/loadingIcon.gif'></div>
<div id="demo"></div>
<!-- / CODE -->
</div>
</body>
</html>
▼prettyPhotoを使って、動画サムネイルをクリックしたときに、オーバーレイで動画を再生するサンプルです。
ERR-content/img/strm/youtubeapi_feedtype/param_author_prettyphoto.jpg設置イメージ
設置サンプル - prettyPhotoサンプルを見る
<!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="X-UA-Compatible" content="IE=8" />
<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.1/jquery.min.js" ></script>
<!-- prettyPhoto -->
<link rel="stylesheet" type="text/css" href="/content/lib/jquery/prettyPhoto3.1.4/css/prettyPhoto.css" />
<script src="/content/lib/jquery/prettyPhoto3.1.4/js/jquery.prettyPhoto.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&author=cocoism3&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",
{
author:"cocoism3",
alt:"json"
},
function(xml) {
getList(xml);
}
);
}
});
/* 日付フォーマット */
var formatDate = function(dateString) {
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;
var s='';
$.each(feed.entry, function(i,item){
var tmp=item.id.$t.split("video:");
var vid=tmp[tmp.length-1];
// prettyPhoto
s+='<a href="'+item.link[0].href+'" rel="prettyPhoto[youtube]"><img src="'+item.media$group.media$thumbnail[0].url+'" /></a>';
});
$("#demo").append(s);
$("a[rel^='prettyPhoto']").prettyPhoto({
social_tools:"",
theme:"dark_square",
autoplay:false, /* 自動再生しない */
slideshow:false, /* スライドショー無効 */
default_width:640,
default_height:400,
hideflash:true,
iframe_markup: '<iframe width="{width}" height="{height}" src="{path}" frameborder="0" allowfullscreen></iframe>'
});
}
</script>
<!-- CSS -->
<style type="text/css">
#demo {
margin:0; padding:0;
clear:both;
float:none;
overflow:hidden;
}
#demo a {
margin:10px; padding:0;
display:block;
width:96px; height:72px;
float:left;
}
#demo a img {
width:96px; height:72px;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>YouTubeで特定のユーザーがアップした動画を検索して表示。動画のサムネイルをクリックすると、「<a href="http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-cloneprettyPhoto" target="_blank">prettyPhoto</a>」で動画をオーバーレイ表示します。</p>
<p>※IE9対応： <meta http-equiv="X-UA-Compatible" content="IE=8" />
<!-- CODE -->
<h3>☆cocoism3がアップした動画☆</h3>
<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>
「関連動画フィード」を取得して表示
2011/1/9
指定した動画に関連付けられた動画のリストを最大100件取得します。
http://gdata.youtube.com/feeds/api/videos/動画ID/related
戻り値のフィード内の各動画エントリ（entry）に、関連動画（link）が含まれます。 linkのrel属性値が「http://gdata.youtube.com/schemas/2007#video.related」になっているもののhref属性が、その動画の関連動画フィードのURLになります。
サンプルでは、動画ID「9YEEl52u8XE」の関連動画を取得し、さらにその動画の関連動画を表示しています。 フィードをJSON形式で受け取る場合は「alt」パラメータに"json"を指定します（デフォルトはXML形式）。
http://gdata.youtube.com/feeds/api/videos/9YEEl52u8XE/related?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() {
$.getJSON(
"http://gdata.youtube.com/feeds/api/videos/9YEEl52u8XE/related",
{
v:2,
alt:"json"
},
function(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>';
s+='お気に入り登録数：'+addFigure(item.yt$statistics.favoriteCount)+'｜'
s+='再生回数：'+addFigure(item.yt$statistics.viewCount)+'回';
s+='</p>';
$.getJSON(
item.link[2].href,
{
v:2,
alt:"json"
},
function(xml2){
var feed2 = xml2.feed;
s+="▼関連動画<ul>";
$.each(feed2.entry, function(ii,item2){
s+='<li><a href="'+item2.link[0].href+'"><img src="'+item2.media$group.media$thumbnail[0].url+'" alt="'+item2.title.$t+'" /></a></li>';
});
s+="</ul>";
s+='</dd>';
$("#demo").append('<dl class="video cf">'+s+'</dl>');
$(".video").fadeIn(1000);
}
);
});
}
);
});
/* 日付フォーマット */
var formatDate = function(dateString) {
var d = new Date(dateString);
var day = d.getDate();
var month = d.getMonth()+1;
var year = d.getFullYear();
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;
}
</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;
}
#demo dd ul {
margin:0; padding:0;
list-style:none;
}
#demo dd li {
margin:0; padding:0;
list-style:none;
display:inline;
width:60px; height:45px;
}
#demo dd li img {
width:60px; height:45px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<h2>指定したYouTube動画（9YEEl52u8XE）の関連動画リストを取得し、さらに各動画の関連動画を取得して表示。</h2>
<p>※IE未対応</p>
<!-- 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>