Question

我想在使用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);

        });

问题是按钮＆＃34;闪烁＆＃34;当悬停在它上面时，并且在播放视频时无论何时都不起作用。如果我停止视频按钮，则该按钮始终有效。

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。

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

1 个答案: