0

以前に別の質問をしたところ、YouTube 検索クエリから XML ファイルを取得するコードについて助けを得ることができました。次に、jQuery を使用して、必要な情報 (ビデオ ID) を XML ファイルから取得し、それを JavaScript 変数に入れます。

これは問題なく機能しましたが、(可能であれば) このチャンネルの最新のビデオを 1 つではなく 3 つサイトに掲載したいと考えています。1 つではなく 3 つの結果を取得するように検索を変更し、jQuery .find() の結果を配列に入れることを提案されました。

問題は、私がこれを間違ったことをしたと私が思うことです（私は本当に確信していると言うべきです）... 見てください：

<!-- enable jQuery -->
<script type="application/javascript" src="jquery.js"> </script>

<!-- video loading functions -->
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery.ajax('https://gdata.youtube.com/feeds/api/videos?author=inthegamesroom&orderby=published&prettyprint=true&start-index=1&max-results=3&v=2',{
      dataType:'xml',
      success: function(data,status, xhr ) {
      var $data =$(data);
      var videoTag = new array ($data.find('videoid'));
      var videoId1 = videoTag[0].text();
      var videoId2 = videoTag[1].text();
      var videoId3 = videoTag[2].text();
    }
  });       
  // YouTube Video embed command
  function embedYT1(id, loaction) {
    jQuery(location).append("<object width=\"1000\" height=\"563\"><param name=\"movie\" value=\"https://www.youtube.com/v/"+id+"?version=3&amp;hl=en_US\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"https://www.youtube.com/v/"+id+"?version=3&amp;hl=en_US\" type=\"application/x-shockwave-flash\" width=\"1000\" height=\"563\" allowscriptaccess=\"always\" allowfullscreen=\"true\"></embed></object>")
  }

  // Call video embed function for 3 vids
  embedYT(videoId1, '#vid1');
  embedYT(videoId2, '#vid2');
  embedYT(videoId3, '#vid2');
});
</script>

誰でも助けることができますか？

また、3 つのビデオを埋め込むように設計されたembedYT 関数があることにも気付くかもしれません。私はこれを正しく行いましたか？(id='vid#'私のテーブルのタグには 3 つあります。

4

1 に答える 1

0

わかりました、ここでいくつか問題があります。気にしないでください。あなたは学んでいて、間違いを犯すのが普通です:)

まず第一に、 varsvideoId1とはvideoId2、videoId3が宣言されている関数に対してローカルであるため、呼び出したときとそれ以降の呼び出し時には表示されませんembedYT(videoId1)。

第二に、変数がグローバルであっても (Javascript でグローバル変数を宣言しないようにしてください)、成功コールバックで設定した値は、embedYT関数を呼び出したときに表示されません。関数は、ページが読み込まれるとすぐに実行されます。これは、おそらく AJAX コールバックが実行される前に発生します。これを修正するには、embedYT 呼び出しをコールバックに移動する必要があります。

3 番目に、$.fn.find()は jQuery コレクション (配列に似たもの) を返すため、結果を他の配列に入れる必要はありません。また、 youtube APIからの応答を見ると、タグは「videoid」(名前空間) ではなく「yt:videoid」であることがわかります。このページでは、jQuery でそれを行うための正しい構文を見つけました。次の 2 つの点を修正しましょう。

var videoTag = $data.find('yt\\:videoid');

これを修正すると、コールバック内で$.fn.eachを使用してコレクションを反復処理し、embedYT各要素を呼び出して、2 番目の問題を修正できます。

...
success: function(data,status, xhr ) {
  var $data =$(data);
  var videoTag = $data.find('yt\\:videoid');

  videoTag.each(function(i) {
    embedYT($(this).text(), '#vid' + i);
  });

}
...

コレクションを反復することは、各要素にアクセスするよりも将来性があります。ビデオの量を変更する必要がある場合は、JavaScript を変更しなくても機能する可能性があります。

したがって、最終的なコードは次のようになります

<!-- enable jQuery -->]
<script type="application/javascript" src="jquery.js"> </script>

<!-- video loading functions -->
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery.ajax('https://gdata.youtube.com/feeds/api/videos?author=inthegamesroom&orderby=published&prettyprint=true&start-index=1&max-results=3&v=2',{
      dataType:'xml',
      success: function(data,status, xhr ) {
        var $data =$(data);
        var videoTag = $data.find('yt\\:videoid');

        videoTag.each(function(i) {
          embedYT($(this).text(), '#vid' + i);
        });

      }
    });     

    // YouTube Video embed command
    function embedYT(id, loaction) {
      jQuery(location).append("<object width=\"1000\" height=\"563\"><param name=\"movie\" value=\"https://www.youtube.com/v/"+id+"?version=3&amp;hl=en_US\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"https://www.youtube.com/v/"+id+"?version=3&amp;hl=en_US\" type=\"application/x-shockwave-flash\" width=\"1000\" height=\"563\" allowscriptaccess=\"always\" allowfullscreen=\"true\"></embed></object>")
    }

  });
</script>

それが役に立てば幸い

于 2012-08-27T16:49:49.397 に答える