jwplayer causes animation errors on tablet

Question

This issue has been solved. See the JSFiddle examples below to see the original errors, and scroll to solution to see the working version.

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 (UPDATE) - In the JSFiddle example provided, I updated jwplayer to version 6 (I was previously using v5) and now the animation errors are occurring on desktop as well. The errors are specifically a result of animations carried on in the leftVideoPriority() and rightVideoPriority() functions. This can be confirmed by commenting out calls to those functions in the stop property of the draggable object. On another note, using CSS animations rather than jQuery animations may be a solution to this problem, but it may eliminate support for IE9 and definitely IE8. This is (unfortunately) not acceptable for my purposes.

I am trying to develop an animating dual-video "widget," if you will, that allows users on both desktop and tablet devices to interact with the widget. It contains two videos, placed side by side, and separated by a "control bar". That control bar can be dragged along the x-axis to bring either the left or right video into focus. Additionally, either video can be clicked/tapped to toggle it into focus. Please view the example to see exactly how it works.

This widget utilizes jwplayer, jQuery UI, & jquery UI touch (a plugin that binds touch events to the mouse event listeners defined in my code).

The widget works correctly on desktop using Chrome (I have not carried out cross-browser compatibility testing just yet), but there are some errors that happen as a result of the event interaction/animation on tablet devices (specifically iOS and Android). The errors (they appear to be more like quirky css than "errors" per se) are similar on both iOS and Android but differ in that on iOS the error disappears when the animation stops; on Android the error sticks after the animation is done.

The problem also seems to stem from jwplayer, as removing the code blocks associated with it resolve the animation errors on tablets.

Here is an excerpt from my jQuery UI code that executes animations on "draggable" events:

$("#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();
            }
        }
    });

And here are the animation code blocks:

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);
        }
    }

In conclusion, I have tried several variants of jQuery UI touch - jquery ui touch punch, for example - but the animation error persists. I am satisfied with the tablet event listener functionality, it's just the animation errors that need to be changed. Unfortunately, I have no idea what could be causing them as I am not familiar with tablet/mobile development, and the visible errors do not seem to closely reflect any html element in the DOM (perhaps it is related to #centerBarContainer, as it appears similar in size/positioning, but the visible errors seems to move in a way that #centerBarContainer does not).

/edit/ - please excuse any messiness / lack of optimization in my code... I had to strip this down to the version you see here from a more complete version, and some lines of code may not make sense out of that context. Everything that is pertinent to this issue has been included, however.

Answer 1

Eureka! Before I explain the solution, please understand that I originally used jwplayer v5 for this project, but updated to v6 per Ethan JWPlayer's recommendation. This change resulted in a different structure of jwplayer within the DOM. Due to the change, I had to tweak the animation functions to apply to the newly correct elements; doing this led me to accidentally find a solution to the animation errors on both tablet and desktop.

Originally, the animation function looked like this:

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();
    }

The jQuery objects that were calling the animate() method were changed to:

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

For v6, one additional change was needed: .jwmain { width:600px; } in the css

Removing the unnecessary animation on additional elements seems to have corrected the errors. I can't claim to understand why they caused the errors to occur in the first place, however.

This change solved the error for both jwplayer v6 & also worked with v5 by also including #videoContentLeft_wrapper and its equivalent #videoContentRight_wrapper in the animated jQuery objects. In both cases, #videoContentLeft and #videoContentRight were removed to correct the animation errors.

Here is the working version (with code) and another version (without code, for tablet testing) - I will update the original post's jsfiddle examples to show the error as it originally existed.