Question

我正在使用官方swipe support中提到的documentation，但它不适用于嵌入式YouTube视频。

Answer 1

问题是YouTube视频实际上是带有HTML5和嵌入式视频的iframe。因此，在视频中滑动不会在iframe外部注册。最简单的解决方案是在视频上放置一个叠加层，让它只覆盖视频。这个问题是你无法点击视频本身来播放它，你必须使用控件。

在this updated demo中，叠加层会覆盖视频并使控件保持可见状态（向滑动叠加层css添加background: #f00;以查看它）。控件高度为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;
                }
            });
    }

});

如何在AnythingSlider中应用滑动

1 个答案: