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

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 交互元素。