Javascript 未触发Youtube API onYoutubePlayerReady和addEventListener

在我的网站上加载Youtube视频时，不会触发Youtube API的onyOutePlayerReady（）和addEventListener（“onstatechange”…）函数

->此代码托管在位于的web服务器上

->加载视频时应该会弹出一个警报-我尝试通过onYoutubePlayerReady和addEventListener（“onStateChange”…）实现警报，但没有成功

非常感谢您的帮助

以下是我到目前为止得到的-所有这些代码都在一个.phtml文件中：

          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

正在尝试提醒onYoutubePlayerReady

  <script type="text/javascript">
       function onYouTubePlayerReady(playerId) {
   alert("READY");
}

  </script>

函数onYouTubePlayerReady（playerId）{
警惕（“准备就绪”）；
}

有多个视频：div在foreach循环中创建。为了便于阅读，删除了大部分代码

<div id="videoDiv-<?php echo $_product->getName();?>"></div>

);

迭代产品阵列，加载相关视频（这很好）

var迭代器；
for（迭代器=0；迭代器<；迭代器++）{
if（productVideos[productNames[iterator]]）{
loadPlayer（productNames[iterator]、productVideos[productNames[iterator]]；
}
}
});

正在尝试将事件侦听器附加到视频-这不起作用

jQuery(window).load(function() {

    for (var index in window.productVideos) {

        if (document.getElementById("ytPlayer-" + window.productVideos[index])) {
            document.getElementById("ytPlayer-" + window.productVideos[index]).addEventListener("onStateChange", "alert");

        }
    }
});

</script>

jQuery（窗口）.load（函数（）{
for（window.productVideos中的var索引）{
if（document.getElementById（“ytPlayer-”+window.productVideos[index]））{
document.getElementById（“ytPlayer-”+window.productVideos[index]）addEventListener（“onStateChange”、“alert”）；
}
}
});

各种不相关的功能

<script type="text/javascript">         
                    /**
 * Resizing the player in JavaScript.
 */

function alert() {
    alert("HI");
}


// Make the player small.
function smallPlayer() {
  resizePlayer(480, 295);
}

// Set the player back to normal.
function normalPlayer() {
  resizePlayer(560, 340);
}

// Make the player big.
function largePlayer() {
  resizePlayer(640, 385);
}

function onPlayerStateChange() {
      resizePlayer(560, 340);
}

// Set the loaded player to a specific height and width.
function resizePlayer(width, height, videoID) {
  var playerObj = document.getElementById("ytPlayer-" + videoID);
  jQuery("#yt-player-" + videoID).parents('li').height('600px');
  playerObj.height = height;
  playerObj.width = width;
}

/**
*在JavaScript中调整播放器的大小。
*/
函数警报（）{
警报（“HI”）；
}
//使玩家变小。
函数smallPlayer（）{
resizePlayer（480295）；
}
//将玩家设置回正常状态。
函数normalPlayer（）{
resizePlayer（560340）；
}
//让球员变得伟大。
函数largePlayer（）{
resizePlayer（640385）；
}
函数onPlayerStateChange（）{
resizePlayer（560340）；
}
//将已加载的播放器设置为特定的高度和宽度。
功能调整播放器（宽度、高度、视频ID）{
var playerbj=document.getElementById（“ytPlayer-”+videoID）；
jQuery（“#yt player-”+videoID）。父母（'li'）。身高（'600px'）；
playerObj.height=高度；
playerObj.width=宽度；
}

加载视频的函数-如上所述

// The "main method" of this sample. Called when someone clicks "Run".
function loadPlayer(productName, videoID) {

  //jQuery("videoDiv-" + productName).parents('li').height('600px');
  // The video to load
  //var videoID = "ylLzyHk54Z0";
  // Lets Flash from another domain call JavaScript
  var params = { allowScriptAccess: "always"};
  // The element id of the Flash embed
  var atts = { id: "ytPlayer-" + videoID, class: "ytplayer"};
  // All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
  swfobject.embedSWF("http://www.youtube.com/v/" + videoID + 
                     "?version=3&enablejsapi=1&playerapiid=player1", 
                     "videoDiv-" + productName, "140", "85", "9", null, null, params, atts); 
} 
</script>

//此示例的“main方法”。当有人单击“运行”时调用。
函数loadPlayer（产品名称，视频ID）{
//jQuery（“videoDiv-”+productName）.parents（'li'）.height（'600px'）；
//要加载的视频
//var videoID=“ylLzyHk54Z0”；
//允许从另一个域调用JavaScript刷新
var params={allowScriptAccess:“始终”}；
//闪存的元素id
var atts={id:“ytPlayer-”+videoID，class:“ytPlayer”}；
//SWFObject处理的所有魔法(http://code.google.com/p/swfobject/)
swfobject.embeddeswf（“http://www.youtube.com/v/“+videoID+
“？版本=3&enablejsapi=1&PlayerAPI=player1”，
“videoDiv-”+productName、“140”、“85”、“9”、null、null、params、atts）；
} 

您应该为每个玩家指定唯一的

playerapiid

。我建议您稍微简化一下

loadPlayer

函数，以接受两个参数：

function loadPlayer(blockID, videoID) {
    swfobject.embedSWF(
        'http://www.youtube.com/v/'+videoID+'?autostart=0&enablejsapi=1&playerapiid='+blockID,
        blockID, '320', '200', '8', null, null,
        { allowScriptAccess: 'always', wmode: 'transparent' },
        { id: blockID, name: blockID }
    );
} 

从单个播放器开始，在编写管理多个播放器的代码之前，使用API使其工作非常重要，因为这样更容易使其工作

---

使用此函数处理JSFIDLE:

您应该为每个玩家指定唯一的

playerapiid

。我建议您稍微简化一下

loadPlayer

函数，以接受两个参数：

function loadPlayer(blockID, videoID) {
    swfobject.embedSWF(
        'http://www.youtube.com/v/'+videoID+'?autostart=0&enablejsapi=1&playerapiid='+blockID,
        blockID, '320', '200', '8', null, null,
        { allowScriptAccess: 'always', wmode: 'transparent' },
        { id: blockID, name: blockID }
    );
} 

从单个播放器开始，在编写管理多个播放器的代码之前，使用API使其工作非常重要，因为这样更容易使其工作

使用此函数处理JSFIDLE：

function loadPlayer(blockID, videoID) {
    swfobject.embedSWF(
        'http://www.youtube.com/v/'+videoID+'?autostart=0&enablejsapi=1&playerapiid='+blockID,
        blockID, '320', '200', '8', null, null,
        { allowScriptAccess: 'always', wmode: 'transparent' },
        { id: blockID, name: blockID }
    );
}