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

视频启动/停止时如何调整视频大小？

1 个答案: