別のボタンから複数の vimeo ビデオを開始/一時停止する解決策を見つけましたが、再生ボタンと一時停止ボタンに画像を使用したいと思います。
コードの修正を手伝ってくれる人はいますか? HTMLボタンコードを画像に置き換えてから、JavaScriptで参照する必要があると思いますが、うまくいかないようです。
どうもありがとう。
私のhtmlは:
<div>
<h1>Player 1</h1>
<div class="api_output"></div>
<iframe id="player_1" src="http://player.vimeo.com/video/7100569?js_api=1&js_swf_id=player_1" width="500" height="281" frameborder="0"></iframe>
<button class="simple" id="api_play">Play</button>
<button class="simple" id="api_pause">Pause</button>
</div>
</div>
<div>
<div>
<h1>Player 2</h1>
<div class="api_output"></div>
<iframe id="player_2" src="http://player.vimeo.com/video/3718294?js_api=1&js_swf_id=player_2" width="500" height="281" frameborder="0"></iframe>
<button class="simple" id="api_play">Play</button>
<button class="simple" id="api_pause">Pause</button>
</div>
</div>
JavaScriptは次のとおりです。
var VimeoEmbed = {};
VimeoEmbed.init = function(e)
{
//Listen to the load event for all the iframes on the page
$('iframe').each(function(index, iframe){
iframe.addEvent('onLoad', VimeoEmbed.vimeo_player_loaded);
});
};
VimeoEmbed.vimeo_player_loaded = function(player_id)
{
$('#'+player_id).prev('.api_output').append('VimeoEmbed.vimeo_player_loaded ' + player_id+'<br/>');
var loop = 0;
var volume = 100;
//Simple Buttons
$('#'+player_id).nextAll('button.simple').bind('click', {'player_id': player_id}, function(e){
var iframe = $('#'+e.data.player_id).get(0);
iframe.api( $(e.target).attr('id'), null );
});
//API EVENT LISTENERS
VimeoEmbed.setupAPIEventListeners($('#'+player_id).get(0));
};
//On document ready
$(document).ready(VimeoEmbed.init);