jquery - HTML5 视频开始的倒计时

Question

我试图让一个 3 秒的计时器显示，然后启动 HTML5 视频。到目前为止，我有一个悬停来启动视频，效果很好。当您将鼠标悬停在视频上时，我需要一个计时器显示，并且当该计时器达到 0 时，它将开始播放视频。有什么建议么。这是我用来启动视频悬停的代码。

   $('#player2').hover(function(){
      var that = $(this);
         if(!$('#'+that.data('video')).is(':visible')){
           $('video:visible')[0].play();
              $('video:visible').fadeIn('normal', function(){
    $('video')[0].play();
                 $('#'+that.data('video')).fadeOut('normal', function(){
               $('#'+that.data('video'))[0].play();
             });
          });
        }else{
          $('#'+that.data('video'))[0].play();
         }

       }, function(){
        $('video:visible')[0].play();
        });

Answer 1

当然，这不是最优雅的做事方式。但是给你一个想法。

var running = false;
$('#counter').hide();
$('#player2').hover(function(){
if(!running){
    running = true;
    var that = $(this); // get your that variable here
    $('#counter').html('3'); //counter animation 3
    $('#counter').show();
    setTimeout(function() {
        $('#counter').html('2'); //counter animation 2
    },1000);
    setTimeout(function() {
        $('#counter').html('1'); //counter animation 1
    },2000);
    setTimeout(function() {
         if(!$('#'+that.data('video')).is(':visible')){  // the rest of your video code
            ....
           });    
    },3000);
 }
});

小提琴示例

http://jsfiddle.net/HevV7/