Question

Youtube API的onYoutubePlayerReady（）＆amp;在我的网站上加载youtube视频时，不会触发addEventListener（“onstatechange”...）函数

- ＆gt;此代码托管在http://www.vapetropolis.ca/handheld-portable-vaporizers

的网络服务器上

- ＆gt;视频加载时会弹出警告 - 我尝试通过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>

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

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

Youtube API onYoutubePlayerReady和addEventListener未被触发

1 个答案: