是否可以禁用 mediaelement.js 中的“mejs-time-float”元素？答案

【问题标题】：Is it possible to disable the "mejs-time-float" element in mediaelement.js?是否可以禁用 mediaelement.js 中的“mejs-time-float”元素？
【发布时间】：2012-09-29 11:43:28
【问题描述】：

是否可以禁用悬停时出现在 MediaElement 播放器上方的“mejs-time-float”元素（此处显示为 5:01）？

【问题讨论】：

标签： mediaelement.js

【解决方案1】：

简单地隐藏 span.mejs-time-float 并不能解决这个问题，因为默认情况下它已经隐藏并且当你将鼠标悬停在 span.mejs-time-total 上时会显示（使用 jQuery .show()）：

total = controls.find('.mejs-time-total')

...

total
.bind('mousedown', function (e) {
    // only handle left clicks
    if (e.which === 1) {
        mouseIsDown = true;
        handleMouseMove(e);
        $(document)
            .bind('mousemove.dur', function(e) {
                handleMouseMove(e);
            })
            .bind('mouseup.dur', function (e) {
                mouseIsDown = false;
                timefloat.hide();
                $(document).unbind('.dur');
            });
        return false;
    }
})
.bind('mouseenter', function(e) {
    mouseIsOver = true;
    $(document).bind('mousemove.dur', function(e) {
        handleMouseMove(e);
    });
    if (!mejs.MediaFeatures.hasTouch) {
        timefloat.show();
    }
})
.bind('mouseleave',function(e) {
    mouseIsOver = false;
    if (!mouseIsDown) {
        $(document).unbind('.dur');
        timefloat.hide();
    }
});

实际禁用小工具提示功能的快速而肮脏的选择是删除上面的“mouseenter”绑定或直接在其后面添加以下内容：

total.unbind('mouseenter');

这将解除 mouseenter 事件的绑定。

但这有点难看，因为您正在修改库，并且如果您更新了库，所有更改都将被清除。更好的方法是在初始化 MediaElement 播放器后简单地取消绑定：

$('video').mediaelementplayer({ 
... your options ...
});

$('.mejs-time-total').unbind('mouseenter');

现在悬停时不会出现小工具提示。

【讨论】：

【解决方案2】：

MediaElement 可以通过 CSS 设置外观，因此您只需将其隐藏在 CSS 中即可。

.mejs-time-float{ 
    display: none;
}

【讨论】：

不要相信这会解决任何问题。默认情况下它已经隐藏并显示在 mouseenter 上 span.mejs-time-total 上。

【解决方案3】：

将此设置为 "display: none" 并没有帮助，但如果除此之外还使用 "!important"，似乎工作得很好，因为重要将覆盖 jQuery 添加的内联样式：

.mejs-time-float {
  display: none !important;
}

【讨论】：

【解决方案4】：

取消绑定 mouseeenter 可以解决悬停问题，但在某些浏览器中，当我们单击进度条时，我们仍然会看到时间浮动。我不认为这是理想的，但它可以工作，因为 jQuery .show() 不会触及可见性：

.mejs-time-float {
    visibility: hidden;
}

【讨论】：

【解决方案5】：

用于禁用在进度条中显示时间弹出窗口的工具提示：

$('video, audio').mediaelementplayer({

    enableProgressTooltip: false

});

【讨论】：