jquery added button flicker and prevent some clicks - mediaelement.js -

jquery added button flicker and prevent some clicks - mediaelement.js -

i want show button @ specific time during video shown mediaelement.js.

i have added event listener time update , add together button code when currenttime @ specific time.

$('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 see</a>'; var empty = ''; if( currenttime > (120)) { $("#offerarea").html(msg); } else { $("#offerarea").html(empty); } }, false); });

the problem button "flicker" when hovering on it, , not work time click when video playing. if stop video button works time.

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

it seems working fine in general. since doesn't work you, seek set variable when display link create sure happens 1 time , not time while video playing.

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 see</a>'; var empty = ''; if (currenttime > (1) && buttonvisible == false) { buttonvisible = true; $("#offerarea").html(msg); } }, false) } });

on jsfiddle.

jquery mediaelement.js