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 (UPDATE 참조) - JSFiddle에서 예를 들어, jwplayer를 버전 6으로 업데이트했는데 (이전에 v5를 사용하고있었습니다) 이제는 데스크탑에서도 애니메이션 오류가 발생하고 있습니다. 이 오류는 특히 leftVideoPriority() 및 rightVideoPriority() 함수에서 수행 된 애니메이션의 결과입니다. 이것은 드래그 가능한 객체의 stop 속성에서 해당 함수에 대한 호출을 주석 처리하여 확인할 수 있습니다. 또 다른 참고로 jQuery 애니메이션이 아닌 CSS 애니메이션을 사용하는 것이이 문제의 해결책 일 수 있지만 IE9 및 확실히 IE8에 대한 지원이 제거 될 수 있습니다. 이것은 (불행히도) 내 목적에 부합하지 않습니다.

필자는 데스크톱 및 태블릿 장치의 사용자가 위젯과 상호 작용할 수있는 애니메이션 이중 비디오 "위젯"을 개발하려고합니다. 여기에는 두 개의 비디오가 나란히 배치되어 있으며 "컨트롤 막대"로 구분되어 있습니다. 이 컨트롤 막대는 X 축을 따라 드래그하여 왼쪽 또는 오른쪽 비디오에 초점을 맞출 수 있습니다. 또한 비디오를 클릭/탭하여 포커스로 전환 할 수 있습니다. 이 예제가 어떻게 작동하는지 정확하게 보려면이 예제를보십시오.

이 위젯은 jwplayer, jQuery UI, & jquery UI touch (터치 이벤트를 내 코드에 정의 된 마우스 이벤트 리스너에 바인딩하는 플러그인)를 사용합니다.

Chrome을 사용하는 데스크톱에서 위젯이 올바르게 작동하지만 (아직 브라우저 간 호환성 테스트를 수행하지는 못했지만) 태블릿 기기 (특히 iOS 및 태블릿)에서 이벤트 상호 작용/애니메이션의 결과로 발생하는 오류가 있습니다. 기계적 인조 인간). 오류 (그들은 "오류"그 자체보다 더 기발한 CSS처럼 보입니다)는 iOS와 Android에서 비슷하지만 iOS에서는 애니메이션이 중지되면 오류가 사라집니다. Android에서는 애니메이션이 끝난 후에 오류가 발생합니다.

또한 문제는 jwplayer와 관련되어있는 코드 블록을 제거하면 태블릿의 애니메이션 오류가 해결되므로 문제가있는 것으로 보입니다.

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

그리고 여기있는 애니메이션 코드 블록 : 여기

는 "드래그"이벤트에 애니메이션을 실행 내 jQuery를 UI 코드에서 발췌 한 것입니다 결론적으로

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 touch punch, for example -하지만 애니메이션 오류가 지속됩니다. 태블릿 이벤트 리스너 기능에 만족합니다. 변경해야 할 애니메이션 오류 일뿐입니다. 불행히도 태블릿/모바일 개발에 익숙하지 않아서 무엇이 문제가 될지 모르지만 눈에 보이는 오류는 DOM 요소의 html 요소를 자세히 반영하지 않는 것 같습니다 (아마도 #centerBarContainer와 관련이 있습니다. 크기와 위치는 비슷하지만 시각적 오류는 #centerBarContainer가하지 않는 방식으로 움직이는 것처럼 보입니다.

/편집/제발 내 머릿속에 어떤 성가신/최적화 부족 ...이 버전을 더 완벽한 버전에서이 버전으로 옮겨야했습니다. 코드의 일부 라인은 그 맥락에서 이해가되지 않을 수도 있습니다. 그러나이 문제와 관련된 모든 것이 포함되었습니다.

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와 오브젝트로 변경 하였다 :

원래 애니메이션 기능이 닮은 V6 용

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

, 하나의 부가적인 변화가 필요 하였다 .jwmain { width:600px; } CSS에서

추가 요소에서 불필요한 애니메이션을 제거하면 오류가 수정 된 것으로 보입니다. 그러나 왜 그들이 오류가 처음 발생했는지 이해한다고 주장 할 수는 없습니다.

이 변경으로 인해 v5와 함께 작동하는 jwplayer v6 &과및 동등한 #videoContentRight_wrapper을 애니메이션 jQuery 객체에 포함하여 오류가 해결되었습니다. 두 경우 모두 애니메이션 오류를 수정하기 위해 #videoContentLeft 및 #videoContentRight이 제거되었습니다.

Here is the working version (with code) 및 another version (without code, for tablet testing) - 원본 게시물의 jsfiddle 예제를 원래대로 오류를 표시하도록 업데이트합니다.