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。