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中查看结果

Answer 2

您需要在回调函数中执行此操作

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

    });
});

使用jQuery在视频上循环淡入和淡出

2 个答案: