[android]jwplayer 平板电脑会导致动画错误

发布时间: 2014/3/5 5:22:05
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

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

JWPlayer v6:链接以在平板设备上预览(JSFiddle)链接以查看完整的代码(JSFiddle)

JWPlayer v5:链接以在平板设备上预览(JSFiddle)链接以查看完整的代码(JSFiddle)

14/2/10 (更新)-在 JSFiddle 示例提供的我更新到版本 6 (我以前使用 v5) jwplayer 和现在动画错误的发生,以及在桌面上。错误是专门由于对动画进行的 leftVideoPriority()rightVideoPriority() 的功能。这可以通过注释掉调用这些函数时在确认 stop 的可拖动的对象的属性。另一个指出,使用 CSS 动画而不是 jQuery 动画可能是解决这个问题,但是它可能会消除对 IE9 和绝对 IE8 的支持。这是 (不幸) 不可以接受我的目的。

我想开发一个活力双视频"构件,"如果你愿意,允许用户在桌面和平板设备上与该构件进行交互。它包含两个视频,并排放置,由"控制栏"分隔。该控制栏可以拖沿 x 轴,把重点集中在要么的左或右的视频。另外,或者视频可以单击/窃听来切换它到焦点。请查看示例以查看它如何工作。

这个 widget 利用 jwplayer,jQuery UI,& jquery UI 触摸 (绑定到鼠标事件侦听器的触控事件在我的代码中定义一个插件)。

该构件正常使用的 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 触摸-例如碰拳,jquery ui -但动画错误仍然存在。我很满意平板电脑事件侦听器功能,只需要更改的动画错误。不幸的是,我也不知道什么能引起他们因为我不熟悉平板电脑/移动发展和可见的错误似乎并不密切反映在 DOM 中的任何 html 元素 (或许它与有关的 #centerBarContainer,它出现在大小/定位,但可见类似错误似乎会移动的方式,#centerBarContainer 不会)。

/edit/-请原谅任何混乱 / 在我的代码优化的缺乏...我不得不 strip 此到你在这里看到一个更完整的版本,该版本和一些的代码行可能没有意义,断章取义。与此问题相关的一切列入了,不过。

解决方法 1:

尤里卡 !我解释一下该解决方案之前,请了解我最初 jwplayer v5 用于这一项目,但更新到 v6 每伊森 JWPlayer建议。这一变化导致 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();
    }

JQuery 对象的被调用 animate() 方法被更改为:

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

为 v6,需要一个额外的修改是: .jwmain { width:600px; } 在 css 中

删除的不必要的动画上额外的要素似乎已更正错误。我不能说明白为什么他们造成的错误发生在第一位,然而。

此更改解决错误的两个 jwplayer v6 & 还与 v5 的还包括 #videoContentLeft_wrapper 及其等效 #videoContentRight_wrapper 动画的 jQuery 对象中。在这两种情况下, #videoContentLeft#videoContentRight 被去除了纠正动画错误。

这里是 (与代码) 的工作版本另一个版本 (无需代码,用于平板电脑测试) -我会更新原始邮政 jsfiddle 例子,显示错误,因为它最初存在。

赞助商