YouTube 数据/播放器 API Jquery 问题答案

【问题标题】：YouTube Data/ Player API Jquery IssueYouTube 数据/播放器 API Jquery 问题
【发布时间】：2011-05-18 18:51:27
【问题描述】：

我无法将 YouTube 视频 ID 解析为在嵌入式播放器中播放它们的函数。我将 Javascript / JQuery 与 YouTube 数据和播放器 API 结合使用。下面是我的代码：

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

没有错误或错误发生，似乎也没有发生任何事情。非常感谢任何帮助！

谢谢，

艾略特

【问题讨论】：

标签： javascript jquery api youtube

【解决方案1】：

来自 Google Chromeless API：

注意：要测试任何这些调用，您必须让文件在网络服务器上运行，因为 Flash 播放器会限制本地文件和互联网之间的调用。 [1]

您为什么不尝试在线演示？ [2]

[1]http://code.google.com/apis/youtube/js_api_reference.html#GettingStarted

[2]http://code.google.com/apis/youtube/youtube_player_demo.html?playerType=chromeless&playerVersion=as3

【讨论】：