如何在視頻開始/停止時調整視頻大小？

Question

我認爲我有正確的代碼可以使視頻在開始播放時變大，在停頓時變小。

$(document).ready(function(){ 
    if ($("section video").get(0).pause || $("section video").get(0).ended) { 
     $("section video").click(function() { 
      $("section video").animate({ width: "100%" }, 'slow') 
      $("section video").queue(function(){ 
       $("section video").get(0).play(); 
      }); 
     }); 
     $("section video").animate({ width: "50%" }, 'slow') 
    } 
    else if ($("section video").get(0).play) { 
     $("section video").click(function(){ 
      $("section video").animate({ width: "50%" }, 'slow') 
      $("section video").queue(function(){ 
       $("section video").get(0).pause(); 
      }); 
     }); 
    } 
}); 

但是，它在我點擊它並啓動時起作用。但是當我用'play'的條件再次點擊它時，沒有任何反應。有人能幫我嗎？

Answer 1

有一個錯字，這是暫停而據我知道有沒有財產，用於獲取打狀態的視頻。

嘗試使用此代碼：

jQuery(document).ready(function($) { 
    var video = $('section video').get(0); 

    video.onended = function(e) { 
     $('section video').animate({ width: "50%" }, 'slow'); 
    } 

    $('section video').click(function() { 
     if(this.paused || this.ended){ 
      $('section video').animate({ width: "100%" }, 'slow'); 
      video.play(); 
     } else{ 
      $('section video').animate({ width: "50%" }); 
      video.pause(); 
     } 
    }); 
}); 

UPDATE

當然，你可以使視頻播放再次，一旦動畫完成：

jQuery(document).ready(function($) { 
    var video = $('section video').get(0); 

    video.onended = function(e) { 
     $('section video').animate({ width: "50%" }, 'slow'); 
    } 

    $('video').click(function() { 
     if(this.paused || this.ended){ 
      $('section video').animate({ 
      width: "100%" 
      }, 
      { 
      duration: 'slow', 
      complete: function(){ 
       video.play(); 
      } 
      }); 
     } else{ 
      video.pause(); 
      $('section video').animate({ width: "50%" }); 
     } 
    }); 
});