javascript - Youtube API onYoutubePlayerReady 和 addEventListener 未被触发

Question

在我的网站上加载 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>

尝试在 YoutubePlayerReady 上发出警报...

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

Answer 1

您应该为每个玩家指定唯一的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/