Search
  1. 動画検索のクエリ パラメータ[vq」〔検索キーワードを指定〕
  2. 動画検索のクエリ パラメータ「alt」〔フォーマット指定〕
  3. 動画検索のクエリ パラメータ「author」〔特定のユーザーを指定〕
  4. 動画検索のクエリ パラメータ「max-results」〔最大取得数指定〕
  5. 動画検索のクエリ パラメータ「start-index」〔取得位置指定〕
  6. 動画検索のクエリ パラメータ「lr」〔地域指定〕
  7. 動画検索のクエリ パラメータ「orderby」〔動画の並び替え〕
  8. 動画検索のクエリ パラメータ「time」〔アップされた期間指定〕
  9. 「関連動画フィード」を取得して表示
  10. 標準フィード:「評価の高い動画フィード」を取得して表示〔top_rated〕
  11. 標準フィード:「お気に入り登録の多い動画フィード」を取得して表示〔top_favorites〕
  12. 標準フィード:「人気の動画フィード」を取得して表示〔most_viewed〕
  13. 標準フィード:「新着動画フィード」を取得して表示〔most_recent〕
  14. 標準フィード:「話題の動画フィード」を取得して表示〔most_discussed〕
  15. 標準フィード:「コメントの多い動画フィード」を取得して表示〔most_responded〕
  16. 標準フィード:「おすすめ動画フィード」を取得して表示〔recently_featured〕
  17. 「ユーザーのお気に入りフィード」を取得して表示〔favorites〕
  18. 「再生リストフィード」を取得して表示〔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_ratedtop_favoritesmost_viewedmost_discussedmost_linkedmost_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>

「ユーザーのお気に入りフィード」を取得して表示
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>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women