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）

14年2月10日（UPDATE） - 在的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觸摸的幾個變體 - 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的對象改爲：

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

對於V6，需要一個額外的變化：.jwmain { width:600px; }在css中

刪除其他元素上不必要的動畫似乎糾正了錯誤。然而，我不能說他們爲什麼首先導致錯誤發生。

這種變化解決了誤差都jwplayer V6 &通過還包括#videoContentLeft_wrapper及其等價#videoContentRight_wrapper在動畫jQuery的對象與V5工作過。在這兩種情況下，都刪除了#videoContentLeft和#videoContentRight以更正動畫錯誤。

Here is the working version (with code)和another version (without code, for tablet testing) - 我將更新原始帖子的jsfiddle示例，以顯示最初存在的錯誤。