我找到了一个非常有用的指南,解释了使用froogaloop的基本vimeo控制器。
我对javascript的理解非常有限,需要一些帮助才能将控制器按钮重新映射到div。
<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>
我所指的codepen: https://codepen.io/bdougherty/pen/JgDfm
谢谢!
答案 0 :(得分:1)
老实说,我根据按钮的innerhtml调用了一些东西,这是一个奇怪的决定。它会使代码混乱,并在设计师决定箭头比播放更好时立即中断。
但是对于你的问题,我会这样做:
$(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>