Question

每个页面都包含多个YouTube视频（从xml文件中检索）。每次单击下一页按钮时，都会将一组新视频加载到主体上的主容器中，同时删除最后一页上的所有视频。除此之外，我还需要每个视频播放器的StateChange回调函数。另外，如果有人也可以指导我如何找到触发StateChange回调函数的视频的父“.container”。

<html>
<head>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
   <script type="text/javascript">
        var atts = { id: "youtube_player" };
        var params = {allowScriptAccess: "always", wmode:"transparent"};
    </script>
</head>
<body>
<div id="myYouTubeVideo"></div>

<script type="text/javascript">
    $("#NEXTPAGE").click(function() {
        for (i=endp-imagestobeloaded;i<endp;i++) {
                $('#con').append("<div class='container' id="+i+" video="+x[i].getElementsByTagName('VIDEO')[0].childNodes[0].nodeValue+" selectd='false'>");
            if (x[i].getElementsByTagName('VIDEO')[0].childNodes[0].nodeValue == 'true'){
                var ele = document.getElementById('myYouTubeVideo');
                if(ele && (ele.nodeName === "OBJECT" || ele.nodeName === "EMBED")){
                        replaceSwfWithEmptyDiv('myYouTubeVideo');
                    console.log('object replaced with div');
                }
                swfobject.embedSWF("http://www.youtube.com/v/"+x[i].getElementsByTagName('URL')[0].childNodes[0].nodeValue+"?enablejsapi=1", "myYouTubeVideo", x[i].getElementsByTagName('WIDTH')[0].childNodes[0].nodeValue, x[i].getElementsByTagName('HEIGHT')[0].childNodes[0].nodeValue, "9", null, null, params, atts);
                $('#'+i).append("<div id='myYouTubeVideo' </div>");
            }
            $('#con').append("</div>");
        }

    });

    function onYouTubePlayerReady(playerId) { 
        var player = document.getElementById("youtube_player");
            player.addEventListener("onStateChange", "onytplayerStateChange");
    }

    function onytplayerStateChange(newState) { // do something here }

    function replaceSwfWithEmptyDiv(targetID){
       var elee = document.getElementById(targetID);
       if(elee){
          var div = document.createElement("div");
          elee.parentNode.insertBefore(div, elee);
          swfobject.removeSWF(targetID);
          div.setAttribute("id", targetID);
          console.log('new div made');
       }
    }
</script>
</body>
</html>

动态嵌入多个swfObject

0 个答案: