javascript - YouTube API和javascript问题

Question

我知道这绝对是贫民窟，但我想弄清楚如何获取YouTube链接的供稿，以便以某种时尚的方式显示在我的首页上。我厌倦了必须在youtube上发布一些内容，然后在我的网站上创建基本上是youtube帖子的重复的帖子。也许已经有一些内置此功能的东西，但是到目前为止我还没有看到它。关于到目前为止我要完成的工作，我有几个问题:

如何更新代码，以便可以在必须引用变量名称的youTubeMe对象中使用“this”。我敢肯定，我知道为什么我现在不能使用它，但是我不知道如何解决？

其次，谷歌api对​​我来说有点奇怪。我不太喜欢使用iFrame，为了获得VideoId我必须做的分割操作是不正确的。

任何建议将不胜感激。我将发布代码，但您也可以找到一个有效的示例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

您应该采取的方式是创建一个闭合，并在其中包含所有内容。您可以这样做:
//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 embed，只是因为“iframe embed”听起来不适合我。如果使用youtube api，则有两个选项:Embedded player或chromeless player。请看一下嵌入式播放器，因为除非您要为播放器构建自定义外观，否则它是必经之路。使用api时，创建播放列表变得容易，因为您可以让javascript执行所有播放和播放列表的操作。

希望能有所帮助。