Question

$(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();
});

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

Answer 1

您需要使用向函数添加参数的方式来尽可能多地重用代码。通过我看到的方式，您可以在所有相关功能中添加playerid，并使用ready(player_id)作为主要ID来最小化player_id中的代码，以帮助访问所有相关视频项。

$(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');
}

使用froogaloop2.js lib [old]的示例：http://codepen.io/Nasir_T/pen/pEmEJE

使用vimeo中的player.js的示例[新改进]：http://codepen.io/Nasir_T/pen/GNKjbe

如果您需要更多帮助，请与我联系。

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

1 个答案: