YouTubeの話題の動画や再生回数の多い動画を表示

広告

YouTubeは話題の動画や再生回数の多い動画などをフィードとして配信しています。ここでは配信されているフィードを使って動画を表示する方法を解説します。

1.YouTubeが配信しているフィード
2.Webページに動画を埋め込み
3.サンプル

YouTubeが配信しているフィード

YouTubeが配信しているフィードについては次のURLを参照して下さい。

p2-1

フィードのURLとして次のような記述があります。(抜粋ですので詳しくは上記URLをご覧下さい)。

NameFeed IdURL and Description
Top ratedtop_ratedURL: https://gdata.youtube.com/feeds/api/standardfeeds/top_rated
Description: This feed contains the most highly rated YouTube videos.
Top favoritestop_favoritesURL: https://gdata.youtube.com/feeds/api/standardfeeds/top_favorites
Description: This feed contains videos most frequently flagged as favorite videos.
Most viewedmost_sharedURL: https://gdata.youtube.com/feeds/api/standardfeeds/most_viewed
Description: This feed contains the most frequently watched YouTube videos.
Most popularmost_popularURL: https://gdata.youtube.com/feeds/api/standardfeeds/most_popular
Description: This feed contains the most popular YouTube videos, selected using an algorithm that combines many different signals to determine overall popularity.

例えば再生回数の多いものであれば次のURLとなります。 

https://gdata.youtube.com/feeds/api/standardfeeds/most_viewed

対象となる期間を指定することができます。指定可能な値は"today" (1日), "this_week" (7日), "this_month" (1ヶ月), "and all_time"(全期間)です。デフォルトは全的間となっていますので、例えば直近7日間で集計したい場合は次のように記述します。 

https://gdata.youtube.com/feeds/api/standardfeeds/most_viewed?time=this_week

また地域を限定することもできます。例えば日本を対象とする場合は次のように記述します。(JPを記述する位置に注意して下さい)。 

https://gdata.youtube.com/feeds/api/standardfeeds/JP/most_viewed?v=2

このフィードのURLに対してGoogle AJAX Feed APIを使いエントリを取得します。 

var feedurl = "https://gdata.youtube.com/feeds/api/standardfeeds/JP/most_viewed?v=2&time=this_week";

var feed = new google.feeds.Feed(feedurl);
feed.setNumEntries(8);
feed.load(function (result){
  /* ... */
});

今回は取得するエントリ数を8に設定しています。

Webページに動画を埋め込み

YouTubeの埋め込みプレーヤーについては次のURLを参照して下さい。

p2-2

Webページに動画を埋め込むには、取得したフィードの中から動画へのリンクを取り出し、リンクの中から「VIDEO_ID」を取得します。

エントリに含まれる動画へのリンクは次のような形式となっています。 

http://www.youtube.com/watch?v=VIDEO_ID

それに対して動画を貼り付ける場合には次のように記述します。 

<object width="幅" height="高さ">
<param name="movie" value="https://www.youtube.com/v/VIDEO_ID?fs=1"</param>
<param name="allowFullScreen" value="true"></param>
<embed src="https://www.youtube.com/v/VIDEO_ID?fs=1"
  type="application/x-shockwave-flash"
  allowfullscreen="true"
  width="幅" height="高さ">
</embed>
</object>

次のサンプルでは取得したフィードの中に含まれる動画へのURLの中から「split」メソッドを使ってパラメータ名「v」の値を取得しVIDEO_IDに設定しています。

サンプル

それでは簡単なサンプルで試してみます。 

<!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-Script-Type" content="text/javascript">
<title>Google AJAX Feed API テスト</title>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="./js/script2_1.js"></script>

</head>
<body>

<p>Google AJAX Feed API テスト</p>
<div id="feed"></div>

</body>
</html>

google.load("feeds", "1");

function initialize() {
  var feedurl = "https://gdata.youtube.com/feeds/api/standardfeeds/JP/top_favorites?v=2&time=this_month";

  var feed = new google.feeds.Feed(feedurl);
  feed.setNumEntries(5);

  feed.load(function (result){
    if (!result.error){
      var container = document.getElementById("feed");
      var htmlstr = "";
      htmlstr += "<p>[タイトル]" + result.feed.title + "</p>";

      htmlstr += "<ul>";
      for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];

        htmlstr += "<li>"
        htmlstr += '<a href="' + entry.link + '">' + entry.title + '</a>';
        htmlstr += "</li>"

        htmlstr += "<li>"
        htmlstr += createYouTubeString(entry.link);
        htmlstr += "</li>"
      }
      htmlstr += "</ul>";

      container.innerHTML = htmlstr;
    }else{
       alert(result.error.code + ":" + result.error.message);
    }
  });
}

function createYouTubeString(link){
  var str = "";

  var id = parseParam(link);
  if (id){
    var url = 'http://www.youtube.com/v/' + id + '&hl=ja&fs=1';

    str += '<object width="300" height="200">';
    str += '<param name="movie" value="'+ url + '"></param>';
    str += '<param name="allowFullScreen" value="true"></param>';
    str += '<embed src="' + url + '" type="application/x-shockwave-flash" ';
    str += 'allowfullscreen="true" width="300" height="200">';
    str += '</embed></object>';
  }

  return str;
}

function parseParam(link){
  var paramStr = link.split('?')[1];
  var params = paramStr.split('&');

  for(var i = 0;i < params.length;i++){
    var pare = params[i].split('=');
    if (pare[0] == "v"){
      return pare[1];
    }
  }

  return null;
}

google.setOnLoadCallback(initialize);

上記を実際にブラウザ見てみると次のように表示されます。

p2-3

今回は期間を1ヶ月とした「Top Favorites」についてフィードを取得し表示しました。

( Written by Tatsuo Ikura )