的Youtube API onYoutubePlayerReady使用addEventListener未觸發

Question

的Youtube API的onYoutubePlayerReady（）&的addEventListener（ 「onstatechange」 ......）時，YouTube視頻加載在我的網站不被觸發的功能

- >這段代碼託管在網絡服務器上http://www.vapetropolis.ca/handheld-portable-vaporizers

- >當視頻加載時會彈出警告 - 我嘗試通過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> 

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的工作是編寫管理幾名球員代碼之前真的很重要，因爲它更容易使它工作。

Working JSFiddle using this function：http://jsfiddle.net/rbRF3/