如何使用不同元素的事件侦听器管理不同的事件？ [英] How to manage different events with event listener for different elements?

问题描述

$(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视频时我无法做到。

I have 2 buttons which on clicking open an iframe and play videos. I am trying to get the player within the iframe to call it's api pause method to pause the video. I can do this well if I use only one iframe video, but I am unable to do when there are multiple iframe videos.

推荐答案

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

You will need to work with adding parameters to the functions in a way to re-use as much code as possible. The way i see it you can add playerid in all related functions and use that to minimize code within the ready(player_id) by utilizing the player_id as main id to help access all related video items.

$(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

Example using froogaloop2.js lib[old]: http://codepen.io/Nasir_T/pen/pEmEJE

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

Example using player.js from vimeo[new improved]: http://codepen.io/Nasir_T/pen/GNKjbe

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

Let me know if you need more help.

这篇关于如何使用不同元素的事件侦听器管理不同的事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！