jquery添加了按钮闪烁并防止一些点击 - mediaelement.js

Question

我想在mediaelement.js显示的视频的特定时间显示按钮。

我添加了一个时间更新的事件监听器，并在当前时间在特定时间时添加按钮代码。

 $('video').mediaelementplayer({ 
      enableAutosize: true, 
      features: ['playpause','volume'], 
      alwaysShowControls: false, 

      success: function(mediaElement, domObject) { 

        mediaElement.addEventListener('timeupdate', function(e) { 

        var currentTime = mediaElement.currentTime; 
        var msg = '<a href="url-link" target="_blank" class="btn">Click to see</a>'; 
        var empty = ''; 

        if(currentTime > (120)) { 
         $("#offerArea").html(msg);       
        } else { 
         $("#offerArea").html(empty); 
        }  

       }, false); 

     }); 

的问题是按钮“忽悠”盘旋在它时，不工作，你在播放视频时，点击所有的时间。如果我停止播放视频，该按钮始终工作。

http://jsfiddle.net/ronjo/owp191Ld/1/

Answer 1

这似乎是一般working just fine。但是因为它不适合你，所以当你显示你的链接时，尝试设置一个变量，以确保它只发生一次，而不是所有的时间都在播放视频。

var buttonVisible = false; 

$('video').mediaelementplayer({ 
    enableAutosize: true, 
    features: ['playpause', 'volume'], 
    alwaysShowControls: false, 

    success: function (mediaElement, domObject) { 
     mediaElement.addEventListener('canplay', function() { 
      mediaElement.play(); 
     }, false); 
     mediaElement.addEventListener('timeupdate', function (e) { 

      var currentTime = mediaElement.currentTime; 
      var msg = '<a href="http://stackoverflow.com/questions/26501102/jquery-added-button-flicker-and-prevent-some-clicks-mediaelement-js" target="_blank" class="btn">Click to see</a>'; 
      var empty = ''; 

      if (currentTime > (1) && buttonVisible == false) { 
       buttonVisible = true; 
       $("#offerArea").html(msg); 
      } 

     }, false) 

    } 
}); 

对JSFIDDLE。