Question

这个问题已经解决了。请参阅下面的JSFiddle示例以查看原始错误，并滚动到解决方案以查看工作版本。

JWPlayer v6： Link to preview on tablet devices（JSFiddle） Link to view full code（JSFiddle）

JWPlayer v5： Link to preview on tablet devices（JSFiddle） Link to view full code（JSFiddle）

2/10/14（更新） - 在提供的JSFiddle示例中，我将jwplayer更新为版本6（我之前使用的是v5），现在桌面上也出现了动画错误。这些错误特别是leftVideoPriority()和rightVideoPriority()函数中进行动画的结果。这可以通过在可拖动对象的stop属性中注释掉对这些函数的调用来确认。另一方面，使用CSS动画而不是jQuery动画可能是这个问题的解决方案，但它可能会消除对IE9和IE8的支持。（遗憾的是）这是我无法接受的。

我正在尝试开发一个动画双视频“小部件”，如果你愿意，它允许桌面设备和平板电脑设备上的用户与小部件进行交互。它包含两个视频，并排放置，并由“控制栏”分隔。可以沿x轴拖动该控制条，使左视频或右视频成为焦点。此外，可以点击/点击任一视频以将其切换到焦点。请查看示例以确切了解其工作原理。

这个小部件使用jwplayer，jQuery UI和＆amp; jquery UI touch（一个将触摸事件绑定到我的代码中定义的鼠标事件侦听器的插件）。

小部件可以在桌面上使用Chrome正常工作（我还没有进行跨浏览器兼容性测试），但是由于平板电脑设备上的事件交互/动画（特别是iOS和Android），会出现一些错误）。在iOS和Android上，错误（它们看起来更像古怪的css而不是“错误”）在iOS上有所不同，但在动画停止时错误消失了;在Android上，动画完成后错误就会消失。

这个问题似乎也源于jwplayer，因为删除与之关联的代码块可以解决平板电脑上的动画错误。

以下是我的jQuery UI代码的摘录，该代码执行“可拖动”事件的动画：

$("#centerBar").draggable({
        axis: "x",
        containment: "#centerBarContainer",
        scroll: false,
        drag: function (event, ui) {

            centerOfHandleFromLeft = ui.offset.left + 25; //get distance from left edge of document to the handle's center

            centerBarPosDelta = centerOfHandleFromLeft - initialHandleFromLeft; // calculate change in center bar position

            // adjust width of video containers according to center bar movement
            $("#videoContainerLeft, #videoContentLeft_wrapper").css({
                "width": centerBarPosDelta + initialLeftVideoWidth
            });
            $('#videoContainerRight, #videoContentRight_wrapper').css({
                "width": initialRightVideoWidth - centerBarPosDelta
            });
        },
        stop: function (event, ui) {

            // check if change in center bar position is more/less than half the width of its draggable area
            if (centerBarPosDelta <= (barContainerWidth / 2)) {
                rightVideoPriority();
            } else {
                leftVideoPriority();
            }
        }
    });

以下是动画代码块：

function leftVideoPriority() {
        $('#videoContainerLeft, #videoContentLeft_wrapper, #videoContentLeft').stop().animate({
            "width": 580
        }, 750);
        $('#videoContainerRight, #videoContentRight_wrapper, #videoContentLeft').stop().animate({
            "width": 220
        }, 750);
        $('#centerBar').stop().animate({
            "left": 360
        }, 750);

        currentVideo = 'left';
        enableVideoSound();
    }

    function rightVideoPriority() {
        $('#videoContainerRight, #videoContentRight_wrapper, #videoContentRight').stop().animate({
            "width": 580
        }, 750);
        $('#videoContainerLeft, #videoContentLeft_wrapper, #videoContentLeft').stop().animate({
            "width": 220
        }, 750);
        $('#centerBar').stop().animate({
            "left": 0
        }, 750);

        currentVideo = 'right';
        enableVideoSound();
    }

    function enableVideoSound() {
        if (currentVideo == 'left') {
            jwplayer('videoContentLeft').setVolume(60);
            jwplayer('videoContentRight').setVolume(0);
        } else {
            jwplayer('videoContentRight').setVolume(60);
            jwplayer('videoContentLeft').setVolume(0);
        }
    }

总之，我尝试了几种jQuery UI touch变体 - jquery ui touch punch, for example - 但动画错误仍然存在。我对平板电脑事件监听器功能感到满意，它只是需要更改的动画错误。不幸的是，我不知道是什么原因导致它们，因为我不熟悉平板电脑/移动开发，并且可见错误似乎并没有密切反映DOM中的任何html元素（可能它与#centerBarContainer相关，因为它看起来类似的大小/定位，但可见错误似乎以#centerBarContainer没有的方式移动。

/ edit / - 请原谅我的代码中的任何混乱/缺乏优化...我不得不将其从一个更完整的版本中删除到你看到的版本，并且某些代码行可能没有意义那个背景。然而，包括与此问题相关的所有内容。

Answer 1

尤里卡！在我解释解决方案之前，请理解我最初使用jwplayer v5进行此项目，但根据Ethan JWPlayer's推荐更新到v6。这种变化导致DOM内的jwplayer结构不同。由于这一变化，我不得不调整动画功能以应用于新的正确元素;这样做导致我无意中找到了平板电脑和台式机上动画错误的解决方案。

最初，动画功能看起来像这样：

function leftVideoPriority() {
        $('#videoContainerLeft, #videoContentLeft_wrapper, #videoContentLeft').stop().animate({
            "width": 580
        }, 750);
        $('#videoContainerRight, #videoContentRight_wrapper, #videoContentRight').stop().animate({
            "width": 220
        }, 750);
        $('#centerBar').stop().animate({
            "left":360
        }, 750);

        currentVideo = 'left';
        enableVideoSound();
    }

调用animate()方法的jQuery对象已更改为：

$('#videoContainerLeft').animate({...});
$('#videoContainerRight').animate({...});

对于v6，需要进行一项额外更改：css中的.jwmain { width:600px; }

删除其他元素上不必要的动画似乎已经纠正了错误。但是，我无法理解为什么它们首先会导致错误发生。

此更改解决了jwplayer v6和amp;的错误。还通过在动画jQuery对象中包含#videoContentLeft_wrapper及其等效#videoContentRight_wrapper来使用v5。在这两种情况下，都删除了#videoContentLeft和#videoContentRight以更正动画错误。

Here is the working version (with code)和another version (without code, for tablet testing) - 我会更新原帖的jsfiddle示例，以显示最初存在的错误。

jwplayer导致平板电脑上的动画错误

1 个答案: