如何在视频开始/停止时调整视频大小？ [英] How to resize video when video starts/stops?

问题描述

  $>我认为我有正确的代码可以让视频在开始播放时变大，而在停顿时变小。 （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）。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'的条件再次点击它时，没有任何反应。有人可以帮我吗？

解决方案

有一个错字，已暂停，据我所知，

尝试使用此代码：

pre $ 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 .paused || this.ended）{
 $（'section video'）。animate（{
 width：100％
}，
 {
 duration ：'slow'，
 complete：function（）{
 video.play（）; 
} 
}）; 
} else {
 video。暂停（）; 
 $（'section video'）。animate（{width：50％}）; 
} 
}）; 
}）; 
  

I think I have the right code to make a video bigger when it starts playing and smaller when it pauses.

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

However, it works when I click on it and it starts. But when I click on it again with the 'play' condition nothing happens. Can someone help me?

解决方案

There's a typo, it's paused and as far as I know there's no property for videos for getting the playing status.

Try with this code:

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

Sure you can make the video playing again once the animation is done:

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

这篇关于如何在视频开始/停止时调整视频大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！