代码之家 › 专栏 › 技术社区 › AAA

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

vimeo-api addeventlistener javascript

AAA · 技术社区 · 8 年前

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

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

1 回复 | 直到 8 年前

Nasir T 8 年前

您需要在函数中添加参数,以便尽可能多地重用代码。在我看来,您可以在所有相关函数中添加playerid,并使用它来最小化 ready(player_id) 利用 player_id 作为主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');
}

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

使用播放器的示例。来自vimeo的js〔新改进〕: http://codepen.io/Nasir_T/pen/GNKjbe

如果你需要更多帮助,请告诉我。