7

SwipeView ( http://cubiq.org/swipeview ) を使用して、タッチスクリーン デバイスでスワイプ可能なスライドショーを作成しています。これは画像で十分簡単ですが、スライドショーに Vimeo ビデオも含めたいと思います。残念ながら、iFrame はスワイプ入力をそれ自体でキャプチャするため (少なくともこれが起こっていると思います)、ビデオ プレーヤーのスライドに到達すると、ページネーションをタップしない限り、スライドから離れることはできなくなります。これは受け入れられません。

私の解決策は、ページのどこかにビデオを隠し (display: none; または height: 0; などを使用)、ビデオの再生をトリガーするクリック イベントでスライドショーの画像を使用することでした。ビデオが非表示になっている場合でも、再生時に全画面表示にして再生する必要があります (少なくとも iPhone では)。

この手法は、デスクトップ ブラウザでテストすると問題なく動作しますが、iPhone ではおかしな動作をします。テスト目的で、ビデオはスライドショーの下に表示されています。ページを読み込んでスライドをタップしても何も起こりません。ただし、実際のビデオ プレーヤーをタップしてビデオを再生すると、ビデオが閉じられると、スライドをタップしてビデオを再度再生できます。基本的に、プレーヤーを介してビデオを再生すると、API を介してビデオを再生できますが、最初にプレーヤーを使用しないと再生できません。

これが私のコードです：

// Append the "hidden" video player to the page
$('.slider-container').append("<div class='mobile-video-slide'><iframe id='slideshow-player' src='//player.vimeo.com/video/81295681?title=0&byline=0&portrait=0&color=8bd4ee&api=1&player_id=slideshow-player' width='500' height='281' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>");

// Get the player object
var iframe = $('#slideshow-player')[0],
    player = $f(iframe);

// When the video is ready
player.addEvent('ready', function() {
    // Add the click event to the slide
    $('#play-video').on('click', function() {
        // Play the video
        player.api('play');

        // Don't jump the page
        return false;
    });
});

player.ready イベントが適切に機能していること、および画像のクリック イベントが適切に機能していることをテストで確認しました。問題は完全にplayer.api('play')通話にあるようです。これを達成するための助け、または別の方法をいただければ幸いです。

4

3 に答える 3

9

これをさらに調査し、同じ問題に関する他の 2 つの StackOverflow の質問 ( js API と iPhoneを使用するビデオ プレーヤー、およびjs API と iPhone を使用するビデオ プレーヤー) と、Vimeo の公式 API プレイグラウンドで同じ動作が発生するという事実を見つけた後、設計上の機能か、API のバグのいずれかです。

理論化: Apple は、モバイル Safari でビデオを自動再生することを許可していません。おそらく、この制限は、API を使用して Javascript でビデオを自動再生できないようにするために、Apple 側で課されているものです。

于 2013-12-10T15:19:07.780 に答える
1

Safari リモート コンソールでは、コンソールにエラーが表示されます -Error: The viewer must initiate playback first.

ビデオを再生する前にシークすると、ビデオは開始されません (iOS のみ。他のプラットフォームは問題ないようです)。

player.addEvent('ready', function() {
    player.api("seekTo", 10);
});

したがって、次のようなことを行う必要があります。

if ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g)) {
    player.addEvent('play', function(id) {
        player.api("seekTo", 10);
    });
} else {
    player.api("seekTo", 10);
}
于 2015-06-15T03:47:30.780 に答える