Youtube API和JavaScript问题

时间:2011-04-20 15:04:15

标签: javascript jquery youtube youtube-api

我知道这必须是完全贫民窟,但我正在试图找出如何获得我的YouTube链接的源,以一种时尚的方式在我的主页上显示。我厌倦了在youtube上发布内容,然后在我的网站上创建一个基本上是youtube帖子重复的帖子。也许已经有一些东西内置了这个功能,但到目前为止我还没有看到它。关于我到目前为止要完成的工作,我有几个问题:

  1. 如何更新我的代码,以便在我的youTubeMe对象中使用'this'来引用变量名称。我很清楚我明白为什么我不能使用它我现在是怎么做的,但我不知道如何解决?

  2. 其次,google api对我来说似乎有些奇怪。我不太习惯使用iFrames和我必须做的拆分操作才能使VideoId无法正确。

  3. 非常感谢任何建议。我会发布代码,但您也可以找到一个有效的示例here

  4. 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; }
    

1 个答案:

答案 0 :(得分: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嵌入因为&#34; iframe嵌入&#34;听起来不对我。如果您使用youtube api,则有两个选项:Embedded playerchromeless player。看一下嵌入式播放器,因为除非你想为你的播放器构建一个自定义皮肤,否则就要走了。使用api时,创建播放列表变得很容易,因为你让javascript完成所有播放和播放列表的内容。

希望有所帮助。