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

Question

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

我已经隐藏了“.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: 点击视频显示控制面板

Mediaelement.js: Show controls panel on click the video

javascript

jquery

plugins

jquery-plugins

mediaelement.js