Youtube API 및 javascript 관련 질문

Question

나는 이것이 완전히 빈민가 여야한다는 것을 알고 있지만, 내 유튜브 링크를 먹어서 내 홈페이지에 약간 세련된 방식으로 표시하는 방법을 알아 내려하고 있습니다. 나는 YouTube에 무언가를 게시해야하는 것에 지쳐 버리고, 기본적으로 YouTube 게시물의 복제물 인 내 웹 사이트에 게시물을 만듭니다. 이미이 기능이 내장 된 이미 뭔가가 있지만 아마도 지금까지 보지 못했습니다.

1. 내 코드를 업데이트 할 수 있습니다 어떻게 내가 변수 이름을 참조 할 필요가 절 내 youTubeMe 객체에 '이'를 사용할 수 있습니다 내가 지금까지 달성하기 위해 노력하고있어에 대한 몇 가지 질문이 있습니다. 나는 내가 그것을 현재하고있는 방법을 사용할 수없는 이유를 이해할 것이라고 확신하지만, 어떻게 수정해야 할 지 모르겠다.

2. 둘째, Google api는 나에게 이상한 것 같습니다. 나는 VideoId를 얻기 위해해야하는 분할 작업과 iFrames를 사용하는 것에 대해 너무 성급하게 생각하지 않습니다.

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 embed"소리가 내게 들리지 않기 때문에 iframe을 사용한 적이 한번도 없습니다. youtube api을 사용하는 경우 두 가지 옵션, Embedded player 또는 chromeless player이 있습니다. 플레이어에 맞는 커스텀 스킨을 만들고 싶지 않으면 임베디드 플레이어를 살펴보십시오. 재생 목록 만들기는 API를 사용하면 자바 스크립트에서 모든 재생 및 재생 목록 작업을 수행 할 수 있기 때문에 쉽습니다.

희망이 있습니다.