Youtube API和JavaScript問題

Question

我知道這必須完全是貧民窟，但我想弄清楚如何獲得我的YouTube鏈接的飼料，以一種有點時尚的方式顯示在我的主頁上。我厭倦了不得不在YouTube上發佈內容，然後在我的網站上創建一個帖子，基本上是youtube帖子的重複內容。也許已經有內置這種功能的東西，但到目前爲止我還沒有看到它。我有什麼我試圖迄今完成了幾個問題：

1. 我如何更新我的代碼，所以我可以在我的youTubeMe對象使用「這個」詩有引用變量名。我很確定我明白爲什麼我不能使用它，目前我是如何做的，但我不知道如何解決？

2. 其次，谷歌API似乎有點奇怪我。我並不太在意使用iFrame和我必須做的分割操作，以便讓VideoId不能正確。

3. 任何意見將不勝感激。我會後的代碼，但你也可以找到工作的例子here

HTML：

<div id="pager"> 
</div> 
<div id="player"> 
</div> 
<script type="text/javascript"> 
    var tag = document.createElement('script'); 
    tag.src = "http://www.youtube.com/player_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

    function onYouTubePlayerAPIReady() { 
     youTubeMe.init(); 
    } 

</script> 

JAVASCRIPT：

var youTubeMe = { 
    pageSize: 10, 
    player: null, 
    startIndex: 1, 
    username: 'google', 

    init: function() { 
     $.getJSON('http://gdata.youtube.com/feeds/users/' + this.username + '/uploads?alt=json&start-index=' + this.startIndex + '&max-results=' + youTubeMe.pageSize, youTubeMe.createYouTubePlayers); 
    }, 

    createYouTubePlayers: function(data) { 
     $('#player').empty(); 
     $('#pager').empty(); 
     if (data.feed.entry.length < youTubeMe.pageSize) { 
      youTubeMe.createPreviousButton(); 
     } else { 
      if (youTubeMe.startIndex !== 1) { 
       youTubeMe.createPreviousButton(); 
      } 
      youTubeMe.createNextButton(); 
     } 

     for (var i = 0; i < data.feed.entry.length; i++) { 
      player = new YT.Player('player', { 
       height: '195', 
       width: '320', 
       videoId: data.feed.entry[i].id.$t.split('/')[5] 
      }); 
     } 
    }, 

    createNextButton: function() { 
     $('<a id=\"next\" href=\"#\">next</a>').appendTo('#pager'); 
     $('#next').click(function(e) { 
      e.preventDefault(); 
      youTubeMe.startIndex += youTubeMe.pageSize; 
      youTubeMe.init(); 
     }); 
    }, 

    createPreviousButton: function() { 
     $('<a id=\"prev\" href=\"#\">prev</a>').appendTo('#pager'); 

     $('#prev').click(function(e) { 
      e.preventDefault(); 
      youTubeMe.startIndex -= youTubeMe.pageSize; 
      youTubeMe.init(); 
     }); 
    } 

}; 

CSS：

iframe { margin: 20px; } 
#pager { background-color: #666; line-height: 3em; text-align: center; } 
#pager a { color: #fff; font-size: 1.8em; margin: 0 15px; } 

Answer 1

你應該去的方式是創建一個clo當然，並且擁有一切。你可以這樣做：

 
//a closure function that calls itself 
(function(){ 

    //with var it would be private and not accesable like this: 
    //youTubeMe.pageSize 
    var pageSize = 10; 

    //declare a global reference to the youTubeMe object 
    var youTubeMe = window.youTubeMe = function(){ 

    }; 

    //with youTubeMe.* it is accessable from anywhere in your page 
    //you can either 
    //declare a public variable like this 
    youTubeMe.player = "youtube player"; 
    //or a public method like this 
    youTubeMe.foo = function(){ 
     //this "this" here is your youTubeMe object 
     console.log(this); 
     bar(); 
    }; 

    //like the private variable at the top, this function is private 
    //and can only be called from inside the youTubeMe object 
    function bar(){ 
     //this "this" here is the window 
     console.log(this); 
    } 

})(); 


console.log(youTubeMe.player); //out puts youtube_player 
youTubeMe.foo(); //outputs the youTubeMe object 
youTubeMe.bar() //throws an undefined error 

至於youtube api;我一直認爲它非常好。我從來沒有使用iframe嵌入，因爲「iframe嵌入」聽起來不對我。如果您使用youtube api，則有兩個選項：Embedded player或chromeless player。看看嵌入式播放器，因爲除非你想爲你的播放器構建一個自定義外觀，否則它的路要走。當您使用api時，創建播放列表變得容易，因爲您可以讓javascript執行所有播放和播放列表。

希望有所幫助。