JavaScript + Ajax 実践サンプル集 - YouTube Data APIを利用してYouTubeの動画を検索して表示する

YouTube Data APIを利用してYouTubeの動画を検索して表示する

説明補足説明コード関連書籍コメント投稿

このサンプルは、YouTubeのData APIとjQueryを利用してキーワードで動画を検索して結果を表示します。サンプルが表示されたら「Pick UP VIDEO」直下の検索窓に「キーワード」を入力して[Search!]ボタンをクリックしてください。検索した動画のサムネイルが表示されます。サムネイルがクリックすると動画が再生されます。「cats」の代わりに「dogs」を入力して検索してみてください。面白い動画が見れます。

このサンプルを編集して試してみる

このサンプルは、共著 JavaScriptプログラマのためのWebデザイン入門に掲載されています。このサンプルの解説とソースコードは、本書を参照してください。

<!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"> 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<meta http-equiv="Content-Style-Type" content="text/css" /> 
	<meta http-equiv="Content-Script-Type" content="text/javascript" /> 
	<title>VIDEO COLLECTION! - YouTube Videos by keyword</title>
  <link href="jQuery/youTubePlayer721/css/import.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
    #videos { margin-top: 10px;}
    #videos ul {
      margin: 0;
      padding: 0;  
    }
    #videos ul li{
	    width:120px;            
      margin: 0 45px 10px 0; 
	    float:left;
      list-style-type: none;
    }    
    #videos ul li img{
      width: 150px; height: 94px;
      border: solid 5px #4c4c4c;
    }
    #videos ul li a:hover img {
      border: solid 5px #dcdcdc;    
    }

#playerContainer
    {
      width: 640px;
      height: 505px;
      clear: left;
      display: none;              
    }
  </style>

var page = 1;
      var pageSize = 4;

$('#btnSearch').click(function () {
        var query = $('#txtQuery').val();
        var time = 'all_time';
        var url = 'http://gdata.youtube.com/feeds/api/videos?start-index={page}&max-results={pageSize}&callback=?';
        var url2 = url.replace('{page}', page).replace('{pageSize}', pageSize);
        var params = {
          v: '2',
          q: query,
          alt: 'json-in-script',  // atom, rss, json, json-in-script(jsonp)
          format: '5'             // 1-mobile, 5-swf, 6-mobile rtsp
        }
        $.getJSON(url2, params, function (data) {
          var feed = data.feed;
          var entries = feed.entry || [];
          var html = ['<ul>'];
          $.each(data.feed.entry, function (i, item) {
            var vid = item.media$group.yt$videoid.$t;
            var title = item.title.$t;
            var url = item.content.src;
            var thumbnailUrl = item.media$group.media$thumbnail[0].url;
            var playerUrl = item.media$group.media$content[0].url;
            html.push('<li><a href="javascript:loadVideo(\'', playerUrl, '\', true)" title="', title,
            '"><img src="', thumbnailUrl, '" /></a></li>');
          });
          html.push('</ul>');
          $('#videos').html(html.join(''));
          if (entries.length > 0) {
            loadVideo(entries[0].media$group.media$content[0].url, false);
            $('#playerContainer').show();
          }
        });      
      });
      $('#btnSearch').trigger('click');
    });

function loadVideo(playerUrl, autoplay) {
      swfobject.embedSWF(
          playerUrl + '&rel=1&border=0&fs=1&autoplay=' + (autoplay ? 1 : 0),
          'player', '640', '505', '9.0.0', false, false, { allowfullscreen: 'true'}  // 290 x 250
        );
    }         
  </script> 
</head>
<body>
	<div id="header">
		<h1><a href="#"><img src="jQuery/youTubePlayer721/images/logo.gif" alt="VIDEO COLLECTION!" /></a></h1>
	</div>

<div id="container">
		<div id="nav">
			<ul id="navInner">
				<li><a href="#">Home</a></li>
				<li><a href="#">Gallery</a>
					<ul>
						<li><a href="#">Music</a></li>
						<li><a href="#">News</a></li>
						<li><a href="#">Anime</a></li>
					</ul>
				</li>
				<li ><a href="#">Contact</a></li>
				<li><a href="#">About</a></li>
			</ul>
		</div>

<div id="main">
			<h2><img src="jQuery/youTubePlayer721/images/pickUp.gif" alt="Pick Up Video" /></h2>
      <input id="txtQuery" type="text" value="cats" />    
      <button id="btnSearch">Search!</button>  
      <div id="videos"> 
        
      </div>
      <div id="playerContainer">
        <object id="player"></object>
      </div>         
			<p>Copyright© 2011 VIDEO COLLECTION! , All Rights Reserved.</p>
		</div>
	</div>

</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1530本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!

YouTube Data APIを利用してYouTubeの動画を検索して表示する

JavaScript + Ajax 実践サンプル集 (1530本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!

YouTube Data APIを利用してYouTubeの動画を検索して表示する

JavaScript + Ajax 実践サンプル集 (1530本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!