javascript - 使用 jquery 在视频上循环淡入淡出

Question

我试图在视频开始时淡入，在结束后淡出，然后重新开始，但我似乎无法获得正确的结果。

这是我必须做到的:

var video = $('.central-video-wrapper video');

video.on('ended', function() {
    video.fadeOut('slow');
    video.load( function(){
        video.fadeIn('slow');
    });
});

Answer 1

您应该根据自己的目的使用play 和ended 事件，并在事件处理程序中使用fadeIn() 和fadeOut()

var video = $('.central-video-wrapper video');
video.on('play', function() {
  video.fadeIn('slow');
}).on('ended', function() {
  video.fadeOut('slow');
});

但是如果你想fadeOut视频onend然后fadeIn再播放，你可以使用setTimeout() 并在其函数中使用 .play() 来播放视频。

var video = $('.central-video-wrapper video');
video.on('play', function() {
  video.fadeIn('slow');
}).on('ended', function() {
  video.fadeOut('slow');
  setTimeout(function(){
    video[0].duration = 0;
    video[0].play();
  }, 1000)
});

在jsfiddle中查看结果