播放暫停多個vimeo視頻

Question

我找到了一種從單獨的按鈕開始/暫停多個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);

Answer 1

我想會是這樣

<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>
        <img class="simple" id="api_play" src="play.png">
        <img class="simple" id="api_pause" src="pause.png">
   <!-- ... same for player 2 -->

然后在js中

     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('img.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));
    };