Remap-Taste zum div in Javascript

Question

Ich fand eine sehr hilfreiche Anleitung zur Erklärung der grundlegenden Vimeo-Controller mit Froogaloop.

Ich habe ein sehr begrenztes Verständnis von Javascript und würde einige Hilfe benötigen, die Controller-Tasten zu divs neu zuordnen.

<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script> 

<iframe id="player1" src="https://player.vimeo.com/video/76979871?api=1&player_id=player1" width="630" height="354" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 

<button>Play</button> 
<button>Pause</button> 

<div class="play">Play</div> <!-- I want to use this div instead of buttons --> 

<script> 

$(function() { 
    var iframe = $('#player1')[0]; 
    var player = $f(iframe); 

    // When the player is ready, add listeners for pause, finish. 
    player.addEvent('ready', function() { 
     status.text('ready'); 

     player.addEvent('pause', onPause); 
     player.addEvent('finish', onFinish); 
    }); 

    // Call the API when a button is pressed 
    $('button').bind('click', function() { 
     player.api($(this).text().toLowerCase()); 
    }); 
}); 

</script> 

Die codepen Ich habe Bezug worden: https://codepen.io/bdougherty/pen/JgDfm

Dank!

Answer 1

Ehrlich gesagt, ich berufe etwas nach dem inneren Schein eines Knopfes macht für eine seltsame Entscheidung. Es macht den Code verwirrend und bricht, sobald ein Designer entscheidet, dass ein Pfeil besser ist als das Spielen.

Aber für Ihre Frage würde ich mit diesem gehen.

$(function() { 
 
    var iframe = $('#player1')[0]; 
 
    var player = $f(iframe); 
 

 
    // When the player is ready, add listeners for pause, finish. 
 
    player.addEvent('ready', function() { 
 
    status.text('ready'); 
 

 
    player.addEvent('pause', onPause); 
 
    player.addEvent('finish', onFinish); 
 
    }); 
 

 
    // Call the API when a button is pressed 
 
    $('.play').bind('click', function() { 
 
    player.api('play'); 
 
    }); 
 
    $('.pause').bind('click', function() { 
 
    player.api('pause'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script> 
 

 
<iframe id="player1" src="https://player.vimeo.com/video/76979871?api=1&player_id=player1" width="630" height="354" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
 

 
<div class="play">Play</div> 
 
<!-- I want to use this div instead of buttons --> 
 
<div class="pause">Pause</div>