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')ボタンを見つけるために使用するのですか? これはボタンの 2 番目のセットのみを選択し、ページ レイアウトに不安定に依存します。良くない。

「プレーヤーボタン」で特定のクラスを使用するか、それらを含む 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);
});

「ボタン」の 2 つのセレクターのどちらかで実行する必要があります。最初のセレクターはより簡潔ですが、2 つ目のセレクターとほとんど同じです。ID とクラス、および必要に応じて子孫構造による作業は、DOM の順序付けに依存するよりも堅牢 (そしておそらく効率的) です。

何が起こっているのかわからない場合は、値 (length特に) をbuttonsログに記録し、プレーヤー ID、iframe、および「ボタン アクション」をログに記録します。

ベスト プラクティスでは<button type='button'>、画像だけでなくボタンを作成し、同じ ID 値を使用しないこともお勧めします。(別の属性を使用してください。おそらくnameそれがコントロールであるため、またはdata-actionHTML 5 に移行したい場合)。

于 2013-09-14T09:08:01.830 に答える