仅在鼠标悬停时显示控制栏 - Jwplayer 7.1.1答案

【问题标题】：Display controlbar only when mouseover - Jwplayer 7.1.1仅在鼠标悬停时显示控制栏 - Jwplayer 7.1.1
【发布时间】：2015-10-16 03:52:46
【问题描述】：

我只想在鼠标悬停事件时显示控制栏。我能够在 Jwplayer 7.0.3 中使用类似这样的东西来实现这一点：

var controlbarDiv = playerFrame.querySelectorAll('.jw-controls .jw-controlbar');
playerFrame.onmouseout = function () {
  playerFrame.className += ' ' + 'jw-flag-user-inactive';
}
controlbarDiv[0].onmouseover = function() {
  playerFrame.classList.remove('jw-flag-user-inactive');
}

播放器 (playerFrame) 有自己的 mouseover 来删除用户非活动类，但现在，在 7.1.1 中，不会触发 mouseover 事件。如果我将它添加到我的 playerFrame 中，它的行为会很奇怪，但仍然不会显示控制栏。有什么想法可能导致这种变化吗？

谢谢。

LE：我添加了这些行

playerFrame.onmouseout = function() {
  if (!playerFrame.classList.contains('jw-flag-user-inactive')) {
    playerFrame.className += ' ' + 'jw-flag-user-inactive';
  }
}
playerFrame.onmouseover = function() {
  if (playerFrame.classList.contains('jw-flag-user-inactive')) {
    playerFrame.classList.remove('jw-flag-user-inactive');
  }
}

这适用于 Chrome 和 Safari，但不适用于 Firefox。在 Firefox 中，如果我快速移出并再次移入，我的鼠标悬停事件不会触发。但是，如果我在事件之间留出 2-3 秒的时间，则会触发 mouseover 事件。似乎 Firefox 中的鼠标悬停事件仅在悬停控制栏时触发。

【问题讨论】：

嗯，你有运行这个的例子吗？此外，当鼠标悬停在播放器上时显示控制栏是默认行为。
嗨@EthanJWPlayer。我想要的是在光标移出播放器后立即隐藏控制栏并仅在悬停时显示它。我通过将“onmouseover”更改为“onmousemove”来实现这一点。
嗯，你有演示这个问题的示例链接吗？
不幸的是我没有。当我有机会时，我会创建一个 plnker 来表达我的意思。谢谢。
好的，谢谢，请告诉我。

标签： jwplayer jwplayer7

【解决方案1】：

虽然更新没有提供合理的解决方案，但我们必须让它发挥作用。

所以，我这样做了：

var targetId = 'player';

$jwplayer(targetId).onReady(function(){

    this.onPlay(callbackOnPlay);

});

var callbackOnPlay = function(){

    var player = $('#' + targetId),
    controlbar = (player.length) ? player.find('.jw-controls') : $('.jw-controls');

    player.onPlay()

    if (player.length && controlbar.length) {

        //Delay 2s
        setTimeout(function() {
           controlbar.fadeOut();
        }, 2000);

        //Add hover event
        player.hover(
           function() {
              controlbar.fadeIn();
           }, function() {
              controlbar.fadeOut();
           }
        );

    }

};

【讨论】：