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/

倒数计时器启动HTML5视频

1 个答案: