Javascript 如何使用不同元素的事件侦听器管理不同的事件？

我有两个按钮，点击打开iframe并播放视频。我试图让iframe中的播放器调用它的api pause方法来暂停视频。如果我只使用一个iframe视频，我可以很好地做到这一点，但如果有多个iframe视频，我就无法做到这一点

---

您需要以尽可能重复使用代码的方式向函数中添加参数。在我看来，您可以在所有相关函数中添加playerid，并使用它来最小化

就绪（player\u id）

中的代码，方法是将

player\u id

用作主id，以帮助访问所有相关视频项目

$(document).ready(function () 
{
    var player_1_listener = $('#myVid_1')[0];
    $f(player_1_listener).addEvent('ready', ready);

    var player_2_listener = $('#myVid_2')[0];
    $f(player_2_listener).addEvent('ready', ready);

    function addEvent(element, eventName, callback) 
    {
        if (element.addEventListener) 
        {
            element.addEventListener(eventName, callback, false);
        }
        else 
        {
            element.attachEvent(eventName, callback, false);
        }
    }

    function ready(player_id) 
    {
        //var froogaloop = $f(player_id);
        if (player_id === myVid_1)
        {
            var froogaloop = $f(player_id);
            function onFinish() 
            {
                froogaloop.addEvent('finish', function(data)
                {
                    /*var players_unloading;
                    players_unloading=$('#myVid_1');
                    $f(players_unloading[0]).api('unload');*/
                    toggleOverlay_1();
                    $f(froogaloop[0]).api('unload');
                });
            }
            //onFinish();
        }
        else if (player_id === myVid_2)
        {
            var froogaloop = $f(player_id);
            function onFinish() 
            {
                froogaloop.addEvent('finish', function(data)
                {
                    /*var players_unloading;
                    players_unloading=$('#myVid_1');
                    $f(players_unloading[0]).api('unload');*/
                    toggleOverlay_2();
                    $f(froogaloop[0]).api('unload');
                });
            }
            //onFinish();
        }
    }
    onFinish();
});

使用froogaloop2.js lib[old]的示例：

使用vimeo[新改进]中的player.js的示例：

---

如果您需要更多帮助，请告诉我。

谢谢您，纳西尔。这个解决方案有效。一个疑问-这里我们正在卸载视频，但是当您重新打开视频时，先前视频上的注释仍然会保留。这是vimeo api的问题吗？嗯，我没看到。你能发送一个截图吗？我在我的原始问题中添加了截图是的，我看到了。我正在研究一个解决方案。似乎是api卸载方法的问题。嘿，Saili。我认为问题在于，如果多次调用unload api，它会隐藏注释。我仍在研究它，但作为一个快速修复，您可以添加一个css类来隐藏覆盖：{display:none！important；}中的player.outro包装。

$(document).ready(function () {
 var player = $('#myVid')[0];
 var player2 = $('#myVid2')[0];
 $f(player).addEvent('ready', ready); 
 $f(player2).addEvent('ready', ready); 

  function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
     element.addEventListener(eventName, callback, false);
    }
    else {
      element.attachEvent(eventName, callback, false);
    }
  }

  function ready(player_id) {
    var froogaloop = $f(player_id);

    function onFinish() {
      froogaloop.addEvent('finish', function(data) {
      toggleOverlay(player_id);
      resetVideo(player_id);
  });
 }
 onFinish();
}

});

function toggleOverlay(playerid){
  $("#" + playerid).parent("#specialBox").parent().css("opacity",".8");
  $("#" + playerid).parent("#specialBox").parent().toggle();
  $("#" + playerid).parent("#specialBox").toggle();
}

function resetVideo(vidID)
{
   var player;
   player=$('#' + vidID);
   $f(player[0]).api('unload');
}