2011-05-18 27 views
0

我遇到了麻煩YouTube視頻ID的被解析到播放它們在嵌入式播放器的功能。我使用與YouTube數據和播放器API的JavaScript/JQuery的組合。這裏是我的代碼如下:YouTube數據/播放器API jQuery的問題

<html> 

<head> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript" src="swfobject.js"></script> 



    <script type="text/javascript"> 

    //LOAD YOUTUBE PLAYER  
    var params = { allowScriptAccess: "always" }; 
    var atts = { id: "myytplayer" }; 
    swfobject.embedSWF("http://www.youtube.com/e/nDq9o9j3-CU?enablejsapi=1&playerapiid=ytplayer", 
        "ytapiplayer", "425", "356", "8", null, null, params, atts); 


    //ALLOW CALLS TO BE MADE TO YOUTUBE PLAYER 
    function onYouTubePlayerReady(playerId) { 
    ytplayer = document.getElementById("myytplayer"); 
    };      


    //PLAY A VIDEO BY THE GIVEN VIDEO ID (PARSED FROM THE JSON OUTPUT) 
    function play(vid) { 
     if (ytplayer) { 
      ytplayer.loadVideoById(vid); 
     } 
    } 




    //GETTING THE JQUERY GOING 
    $(document).ready(function(){ 



     //JSON URL FOR THE VIDEOS I AM TARGETTING 
     var url = "http://gdata.youtube.com/feeds/api/videos?q=TedxConejo&orderby=published&max-results=50&v=2&alt=jsonc"; 

     //PULL THE JSON OUTPUT FROM THAT URL AND PUT IT INTO A FUNCTION 
     $.getJSON(url, 
      function(response){ 

       //LOOP THROUGH EACH ITEM IN THE OUTPUT 
       $.each(response.data.items, function(i,video){ 
        //CREATE A THUMBNAIL WITH A LINK FOR EACH ITEM 
        $("#jsonOutput").append("<a href='#' name="+video.id+"><img style='width:100px' src='" + video.thumbnail.hqDefault + "'/></a>") 
       }); 

     }); 


    //FUNCTION TO FIRE WHEN THUMBNAILS ARE CLICKED 
    $("a").click(function(){ 
     //GRAB VIDEO ID FROM NAME ATTRIBUTE OF LINK 
     $(this).attr("name") = video_id;  



     //PARSE VIDEO ID TO PLAY FUNCTION 
      play(video_id); 

     }); 


     }); 

     </script> 





    </head> 


    <body> 

    <h1>Hello, World</h1> 

    <div id="jsonOutput" style="width:800px; float:left; margin-right:20px"></div> 
    <div id="ytapiplayer"> 
    </div> 



    </body> 
</html> 

沒有錯誤或錯誤發生,似乎沒有發生。任何幫助是極大的讚賞!

感謝,

埃利奧特

回答

相關問題