0

我找到了一种使用自定义按钮播放和暂停 vimeo 视频的解决方案，但我现在已将按钮放在一个名为 buttonHolder 的单独 div 中，我似乎无法获得正确的途径来让按钮在他们自己的 div 中工作.

我真的很感激任何帮助。

我的 html 将是：

玩家 1

<div class="buttonHolder">               
    <img class="simple" id="api_play" src="test.jpg" />
                <img class="simple" id="api_pause" src="test.jpg" />
</div>
            </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>

<div class="buttonHolder">
    <img class="simple" id="api_play" src="test.jpg" />
    <img class="simple" id="api_pause" src="test.jpg" />
</div>
        </div>
    </div>

我的jQuery代码是：

var VimeoEmbed = {};

        //Called on document ready
        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);
            });
        };


        //EVENT CALLBACKS
        /*
         * Called when the player finishes loading. The JavaScript API is only available
         * after this event fires.
         *
         * @param player_id (String): ID of the iframe which has finished loading.
         */
        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));
        };


        //On document ready
        $(document).ready(VimeoEmbed.init);

我认为需要编辑的代码如下，但我尝试了多种解决方案，但没有成功。

//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 );
            });
4

1 回答 1

0

为什么要使用$('#'+player_id).nextAll('img.simple')查找按钮？这只会选择第二组按钮......并且它不稳定地依赖于页面布局。不好。

在“播放器按钮”上使用特定类或包含它们的 DIV 上的类会更简单。

// Simple Buttons
//
var buttonClass = 'playerButtons_'+player_id;
var buttons = $('.buttonHolder img.'+buttonClass);
console.log('bind player buttons', buttons);
//
buttons.bind( 'click', {'player_id': player_id}, function(e){
    var iframe = $('#'+e.data.player_id).get(0);
    var action = $(e.target).attr('id');           // FUTURE -- from data('action').
    console.log('player button', iframe, action);
    iframe.api( action, null);
});

“按钮”的两个选择器中的任何一个都应该这样做——第一个更简洁，但几乎等同于第二个。使用 ID 和类，如有必要，后代结构比依赖 DOM 排序更健壮（并且可能更有效）。

如果您不确定发生了什么，请记录（length尤其是）的值buttons并记录播放器 ID、iframe 和“按钮操作”。

最佳实践也将使您的按钮<button type='button'>而不仅仅是图像，并且不使用相同的 ID 值。（使用不同的属性——也许是name因为它是一个控件，或者data-action如果你想使用 HTML 5。）

于 2013-09-14T09:08:01.830 回答