播放暂停多个 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));
    };