JavaScript + Ajax 実践サンプル集 - jQueryのjYouTubeプラグインでビデオのサムネイルを取得する

jQueryのjYouTubeプラグインでビデオのサムネイルを取得する

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

このサンプルは、jQueryの jYouTube プラグインを利用してYouTubeのビデオのサムネイルを生成して表示します。サンプルが表示されたら、テキストボックスにビデオのURLを入力して[Get Thumbnail]ボタンをクリックします。テキストボックスのURLを書き換えて試してみてください。

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

<!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>jYoutube - jQuery YouTube plugin demo</title>
  <link href="jQuery/jYouTube/demo.css" rel="stylesheet" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  <script src="jQuery/jYouTube/jyoutube.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      var url = '';
      $('#submit').click(function () {
        if ($('#url').val() != '') {
          url = $.jYoutube($('#url').val());
          $('#thumbs').append($('<img src="' + url + '" />'));
        }
      });
    });
  </script>
</head>
<body>
  <div class="left">
    <h1>Submit YouTube link</h1>
    <form>
    <input type="text" name="url" id="url"  style="width: 300px;"  value="http://www.youtube.com/watch?v=jZxRWTz8qiY" />
    <input type='button' value="Get Thumbnail" id="submit" /></form>
    <p class="title">
      Your YouTube video thumbs:</p>
    <div id="thumbs">
    </div>
  </div>
  <br clear="all" />
</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

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

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

jQueryのjYouTubeプラグインでビデオのサムネイルを取得する

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

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

jQueryのjYouTubeプラグインでビデオのサムネイルを取得する

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

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