jwplayer 导致平板电脑出现动画错误

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 和 jquery UI touch（一个将触摸事件绑定到我的代码中定义的鼠标事件侦听器的插件）。

该小部件在使用 Chrome 的桌面上正常工作（我还没有进行跨浏览器兼容性测试），但是由于平板设备（特别是 iOS 和 Android）上的事件交互/动画而发生了一些错误）。错误（它们看起来更像是古怪的 css 而不是“错误”本身）在 iOS 和 Android 上是相似的，但在 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 的错误，并且还通过在动画 jQuery 对象中包含 #videoContentLeft_wrapper 及其等效的 #videoContentRight_wrapper 来与 v5 一起使用。在这两种情况下，#videoContentLeft 和 #videoContentRight 都被删除以更正动画错误。

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