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

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

但是，当我单击它并启动时它就会起作用。但是当我在“播放”条件下再次单击它时，什么也没有发生。有人可以帮助我吗？

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

更新

当然，您可以在动画完成后再次播放视频:

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