jquery - jquery と froogaloop が iphone と ipad で動作しませんか?

Question

こんにちは、サファリ、クロム、ファイアフォックスでは正常に動作する次のコードがありますが、iPhone や iPad では動作しません。jquery と froogaloop を使用します。クロスブラウザとデバイス互換性のあるソリューションを探しています。他の提案を受け入れます。

html は次のとおりです。

    <div class="container">
            <div>
                <div class="holder">
                <h2>Vimeo Player 1</h2>
                <iframe id="player_1" src="http://player.vimeo.com/video/7100569?api=1&amp;player_id=player_1" width="540" height="304" frameborder="0"></iframe>
                <dl class="simple">
                    <dt>Simple Buttons <span>(buttons with simple API calls)</span></dt>
                    <dd><img class="play" src="images/play.jpg" style="cursor:pointer;"></dd>
                    <dd><img class="pause" src="images/pause.jpg" style="cursor:pointer;"></dd>


                </dl>

            </div>
        </div>

Jquery は次のとおりです。

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
    <script>
        (function(){

            // Listen for the ready event for any vimeo video players on the page
            var vimeoPlayers = document.querySelectorAll('iframe'),
                player;

            for (var i = 0, length = vimeoPlayers.length; i < length; i++) {
                player = vimeoPlayers[i];
                $f(player).addEvent('ready', ready);
            }

            /**
             * Utility function for adding an event. Handles the inconsistencies
             * between the W3C method for adding events (addEventListener) and
             * IE's (attachEvent).
             */
            function addEvent(element, eventName, callback) {
                if (element.addEventListener) {
                    element.addEventListener(eventName, callback, false);
                }
                else {
                    element.attachEvent(eventName, callback, false);
                }
            }

            /**
             * Called once a vimeo player is loaded and ready to receive
             * commands. You can add events and make api calls only after this
             * function has been called.
             */
            function ready(player_id) {
                // Keep a reference to Froogaloop for this player
                var container = document.getElementById(player_id).parentNode.parentNode,
                    froogaloop = $f(player_id),
                    apiConsole = container.querySelector('.console .output');

                /**
                 * Prepends log messages to the example console for you to see.
                 */
                function apiLog(message) {
                    apiConsole.innerHTML = message + '\n' + apiConsole.innerHTML;
                }

                /**
                 * Sets up the actions for the buttons that will perform simple
                 * api calls to Froogaloop (play, pause, etc.). These api methods
                 * are actions performed on the player that take no parameters and
                 * return no values.
                 */
                function setupSimpleButtons() {
                    var buttons = container.querySelector('div dl.simple'),
                        playBtn = buttons.querySelector('.play'),
                        pauseBtn = buttons.querySelector('.pause'),
                        unloadBtn = buttons.querySelector('.unload');

                    // Call play when play button clicked
                    addEvent(playBtn, 'click', function() {
                        froogaloop.api('play');
                    }, false);

                    // Call pause when pause button clicked
                    addEvent(pauseBtn, 'click', function() {
                        froogaloop.api('pause');
                    }, false);

                    // Call unload when unload button clicked
                    addEvent(unloadBtn, 'click', function() {
                        froogaloop.api('unload');
                    }, false);
                }


                setupSimpleButtons();

                setupEventListeners();


                // Setup clear console button
                var clearBtn = container.querySelector('.console button');
                addEvent(clearBtn, 'click', function(e) {
                    apiConsole.innerHTML = '';
                }, false);

                apiLog(player_id + ' ready!');
            }
        })();
    </script>