javascript - AnythingSliderでスワイプを適用する方法

Question

公式ドキュメントに記載されているスワイプサポートを使用していますが、埋め込まれたYouTubeビデオでは機能しません。

Answer 1

問題は、YouTube 動画が実際には HTML5 を含む iframe であり、内部に動画が埋め込まれていることです。そのため、ビデオをスワイプしても、iframe の外側のコンテンツには登録されません。最も簡単な解決策は、ビデオの上にオーバーレイを配置して、ビデオだけを覆うようにすることです。これの問題は、ビデオ自体をタップして再生することができず、コントロールを使用する必要があることです。

この更新されたデモでは、オーバーレイがビデオを覆い、コントロールは表示されたままになります (表示するbackground: #f00;には、スワイプ オーバーレイ css に a を追加します)。コントロールの高さは 40 ピクセルなので、オーバーレイの高さはこれを考慮に入れていることがわかります。

CSS は次のとおりです (このデモでは、スライダーのサイズは 300 x 200 です)。

.swipe-overlay {
    position: absolute;
    width: 300px;
    height: 160px;
    top: 0;
    left: 0;
}

これは更新された初期化コードです。

$('#slider').anythingSlider({

    // Callback when the plugin finished initializing
    onInitialized: function(e, slider) {

        var time = 1000, // allow movement if < 1000 ms (1 sec)
            range = 50,  // swipe movement of 50 pixels triggers the slider
            x = 0, t = 0, touch = "ontouchend" in document,
            st = (touch) ? 'touchstart' : 'mousedown',
            mv = (touch) ? 'touchmove' : 'mousemove',
            en = (touch) ? 'touchend' : 'mouseup';

        $('<div class="swipe-overlay"></div>')
            .appendTo(slider.$window)
            .bind(st, function(e){
                // prevent image drag (Firefox)
                e.preventDefault();
                t = (new Date()).getTime();
                x = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX;
            })
            .bind(en, function(e){
                t = 0; x = 0;
            })
            .bind(mv, function(e){
                e.preventDefault();
                var newx = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX,
                r = (x === 0) ? 0 : Math.abs(newx - x),
                // allow if movement < 1 sec
                ct = (new Date()).getTime();
                if (t !== 0 && ct - t < time && r > range) {
                    if (newx < x) { slider.goForward(); }
                    if (newx > x) { slider.goBack(); }
                    t = 0; x = 0;
                }
            });
    }

});