如何在视频开始/停止时调整视频大小？

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