Question

我想仅在点击（播放事件）视频时显示“控件”面板。

我已经隐藏了“.mejs-controls”：

CSS

.mejs-controls{ visibility:hidden; }

并设置如下：

JS

$('video,audio').mediaelementplayer({
    alwaysShowControls: true,
    success: function (mediaElement, domObject) {
        mediaElement.addEventListener('play', function(e) {
            $('.mejs-controls').css("visibility", "visible");
        }, false);
    }
});

它适用于我，但如果我在页面上有多个玩家，则会显示此页面上每个玩家的控件。如何避免这种情况并仅在我点击的播放器中显示控件？

更新

HTML 很简单：

<div class="video-wrapper">
                    <video src="images/video/video.mp4" poster="images/video/poster.jpg"></video>
                </div>

Answer 1

取决于您使用的HTML结构。

因此，您的问题是，您定位的是所有$('.mejs-controls')，而不是（此处为例，因为您没有显示任何HTML）仅与$(this)相关的

$(this).closest("div").find('.mejs-controls').css("visibility", "visible");

所以这一切都是为了找出所需的 DOM遍历方法 - 以获得正确的元素，但始终引用this交互元素。

Mediaelement.js：单击视频时显示控制面板

1 个答案: