javascript - Youtube API onYoutubePlayerReady和addEventListener未被触发

将youtube视频加载到我的网站时，不会触发YouTube API的onYoutubePlayerReady()和addEventListener(“onstatechange” ...)函数

->此代码托管在http://www.vapetropolis.ca/handheld-portable-vaporizers的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>

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

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

将产品/视频ID添加到javascript数组

<script type="text/javascript">

jQuery(document).ready(function() {
    window.productVideos = {
        //Product Name : Youtube Video Id
    };

    productVideos["Volcano Vaporizer - Classic or Digital"] = "ukHcyEMxBEE";
    productVideos["Iolite Original Vaporizer"] = "WaVSuJ0DH7c";
    productVideos["Iolite Wispr Vaporizer"] = "OTCN-bl10f0";


    var productNames = new Array(
        <?php $count = 0; foreach($_productCollection as $_product ) {
            if ($count > 0) echo ',';
            echo '"' . $_product->getName() . '"';
            $count++;
        }?>
    );

遍历产品数组，加载关联的视频(效果很好)

    var iterator;
    for (iterator = 0; iterator < <?php echo $_productCollection->count(); ?>; iterator++) {
        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>

各种不相关的功能

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

加载视频的功能-在上方调用

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

最佳答案

您应该为每个玩家指定唯一的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一起使用在编写管理多个播放器的代码之前非常重要，因为它更易于工作。

使用此功能的JSFiddle工作:http://jsfiddle.net/rbRF3/