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

我想在使用mediaelement.js显示视频期间的特定时间显示一个按钮

我为时间更新添加了一个事件侦听器，并在currentTime处于特定时间时添加了按钮代码

        $('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);

        });

$（“视频”）.mediaelementplayer({
enableAutosize:true，
特点：[“播放暂停”，“音量]，
alwaysShowControls:错误，
成功：函数（mediaElement、domObject）{
mediaElement.addEventListener（'timeupdate'，函数（e）{
var currentTime=mediaElement.currentTime；
var msg=''；
var空=“”；
如果（当前时间>（120））{
$（“#offerArea”）.html（msg）；
}否则{
$（“#offerArea”）.html（空）；
}       
}，假）；
});

问题是，当鼠标悬停在按钮上方时，按钮会“闪烁”，并且在播放视频时，按钮不会一直工作。如果我停止视频，按钮会一直工作

这似乎是一般情况。但由于它不适用于您，请尝试在显示链接时设置一个变量，以确保它仅在视频播放时发生一次，而不是一直发生

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)

    }
});

var按钮可视=false；
$（“视频”）.mediaelementplayer({
enableAutosize:true，
功能：[“播放暂停”，“音量”]，
alwaysShowControls:错误，
成功：函数（mediaElement、domObject）{
mediaElement.addEventListener（'canplay'，函数（）{
mediaElement.play（）；
}，假）；
mediaElement.addEventListener（'timeupdate'，函数（e）{
var currentTime=mediaElement.currentTime；
var msg=''；
var空=“”；
如果（currentTime>（1）&&buttonVisible==false）{
按钮可视=真；
$（“#offerArea”）.html（msg）；
}
}，错）
}
});

---

打开。

请使用您的HTML和JavaScript设置一些演示，这样我们就可以看到您的代码中出现了什么问题。我对您的JSFIDLE代码也有同样的问题。我在一台运行OSX 10.9.5的Mac上，并尝试了Safari v7.1、Firefox 32.0.3和Google Chrome v38.0.2125.104。非常有趣。我使用的是10.9.4，它运行得很好浏览器。如果我的计算机能够以足够快的速度重新绘制元素，那么这可能是一个性能问题，但是你的计算机没有。在我答案的底部，第二个JSFIDLE链接是否有效？在这种情况下，正如我在我的帖子中提到的，由于你在120秒后每毫秒更新一次，你就要重新绘制数千次链接。你应该这样做更新offerArea一次，然后设置一个变量，使其不会每毫秒发生一次。类似于我的示例。是的，现在我看到你有两个示例。你的第二个副手工作。但它真的每毫秒更新一次吗？我以为它只在时间更新事件上更新，大约每秒4次。。。