JavaScript + Ajax 実践サンプル集 - jQueryのGestYoutubeプラグインで動画のビデオギャラリーを表示

jQueryのGestYoutubeプラグインで動画のビデオギャラリーを表示

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

このサンプルは、jQueryのYouTubeプラグインを使用してYouTubeのビデオギャラリーを表示します。ビデオのアイコンをクリックすると、そのビデオが動画画面に表示されますので[開始]ボタンをクリックします。

array_videoBigには、YouTubeの動画のリンクを格納します。array_video_samllには、ビデオのスモールイメージのURLを格納します。スモールイメージのURLは、YouTubeのサイトからイメージを右クリックしてコンテキストメニューから[プロパティ]を選択して取得します。

var array_videoBig = new Array();

array_videoBig[0] = 'http://jp.youtube.com/watch?v=y88a9EpQid8';
array_videoBig[1] = 'http://jp.youtube.com/watch?v=a8a423yllBA';
array_videoBig[2] = 'http://jp.youtube.com/watch?v=p8eUHBeZH-w';

var array_video_small = new Array();
array_video_small[0] = 'http://i2.ytimg.com/vi/y88a9EpQid8/default.jpg';
array_video_small[1] = 'http://i2.ytimg.com/vi/a8a423yllBA/default.jpg';
array_video_small[2] = 'http://i1.ytimg.com/vi/p8eUHBeZH-w/default.jpg';

$("#video").GestYoutube({
  array_video_big: array_videoBig,
  array_video_small: array_video_small,
  colore: 'FF0000',     
  coloredue: '00FF00', 
  position_big: 'down' 
});

<!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>
  <title>jQuery - Youtube plugin</title>
  <script src="jQuery/jquery-1.3.1.js" type="text/javascript"></script>
  <script src="jQuery/youTube/youtube.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {

var array_videoBig = new Array();

array_videoBig[0] = 'http://jp.youtube.com/watch?v=y88a9EpQid8';
      array_videoBig[1] = 'http://jp.youtube.com/watch?v=a8a423yllBA';
      array_videoBig[2] = 'http://jp.youtube.com/watch?v=p8eUHBeZH-w';

var array_video_small = new Array();
      array_video_small[0] = 'http://i2.ytimg.com/vi/y88a9EpQid8/default.jpg';
      array_video_small[1] = 'http://i2.ytimg.com/vi/a8a423yllBA/default.jpg';
      array_video_small[2] = 'http://i1.ytimg.com/vi/p8eUHBeZH-w/default.jpg';

$("#video").GestYoutube({
        array_video_big: array_videoBig,
        array_video_small: array_video_small,
        colore: 'FF0000',     
        coloredue: '00FF00', 
        position_big: 'down' 
      });     
    });
  </script>

</head>
<body>

外部スクリプトHEAD部BODY部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
$(function() {

  var array_videoBig = new Array();

  array_videoBig[0] = 'http://jp.youtube.com/watch?v=y88a9EpQid8';
  array_videoBig[1] = 'http://jp.youtube.com/watch?v=a8a423yllBA';
  array_videoBig[2] = 'http://jp.youtube.com/watch?v=p8eUHBeZH-w';

  var array_video_small = new Array();
  array_video_small[0] = 'http://i2.ytimg.com/vi/y88a9EpQid8/default.jpg';
  array_video_small[1] = 'http://i2.ytimg.com/vi/a8a423yllBA/default.jpg';
  array_video_small[2] = 'http://i1.ytimg.com/vi/p8eUHBeZH-w/default.jpg';

  $("#video").GestYoutube({
    array_video_big: array_videoBig,
    array_video_small: array_video_small,
    colore: 'FF0000',     
    coloredue: '00FF00', 
    position_big: 'down' 
  });
});

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
<script src="jQuery/jquery-1.3.1.js" type="text/javascript"></script>
<script src="jQuery/youTube/youtube.js" type="text/javascript"></script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
<div class="content">
  <div align="center" id="video"></div>
</div>

コメント・提案の投稿！

名前
メール
件名
本文

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

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

jQueryのGestYoutubeプラグインで動画のビデオギャラリーを表示

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

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

jQueryのGestYoutubeプラグインで動画のビデオギャラリーを表示

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

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5