API YouTube и вопросы по JavaScript - PullRequest
Новая
       0

API YouTube и вопросы по JavaScript

0 голосов
/ 20 апреля 2011

Я знаю, что это должно быть полностью гетто, но я пытаюсь выяснить, как получить канал моих ссылок на YouTube для отображения на моей домашней странице в несколько стильной форме.Я устал от того, чтобы что-то публиковать на YouTube, а затем создать пост на моем сайте, который в основном дублирует пост на YouTube.Возможно, уже есть что-то, что имеет такую ​​встроенную функциональность, но пока я этого не видел.У меня есть пара вопросов о том, что я пытаюсь сделать на данный момент:

  1. Как я могу обновить свой код, чтобы я мог использовать «this» в моем стихе объекта youTubeMe, ссылаясь наимя переменной.Я почти уверен, что понимаю, почему я не могу использовать это, как я делаю это в настоящее время, но я не знаю, как это исправить?

  2. Во-вторых, Google API кажетсянемного странно для меня.Меня не слишком радует использование iFrames, и операция разделения, которую я должен сделать, чтобы получить VideoId, не может быть правильной.

  3. Любой совет будет принят с благодарностью.Я выложу код, но вы также можете найти рабочий пример здесь

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 Ответ

1 голос
/ 20 апреля 2011

Путь, по которому вы должны идти, - это создать замыкание и иметь в нем все.Вы можете сделать это так: 

//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

Что касается API YouTube;Я всегда находил, что это действительно хорошо.Я никогда не использовал встраивание iframe только потому, что «встраивание iframe» звучит мне не правильно.Если вы используете YouTube API , у вас есть два варианта: Встроенный проигрыватель или хромированный плеер .Взгляните на встроенный проигрыватель, потому что если вы не хотите создавать собственный скин для своего игрока, это путь.Создание списка воспроизведения становится простым, когда вы используете API, потому что вы позволяете javascript выполнять все функции воспроизведения и воспроизведения.

Надеюсь, это поможет.

...