Javascript/jQuery : toggle (vjs-fade-out) when userActive value changes (video. js)

Question

我正在使用 video.js 创建一个需要在多个设备上播放的播放器。我有一个自定义(返回菜单)按钮，它位于视频的右上角。我需要根据用户交互(mouseover、mouseout、)添加/删除 (vjs-fade-out) 类点击, playe, pasue, ...)。到目前为止我有这个有一些错误...

HTML:

<div class="menu-btn">
  <a href="../index.html">
    <img src="../img/back.svg" width="50">
  </a>
</div>

<video id="myPlayer" class="video-js vjs-sublime-skin" width="1024px" height="768px" controls autoplay preload data-setup='{"nativeControlsForTouch": false}'>
  <source src="../video/test.mp4" type='video/mp4' />
  <track class="caption" kind="captions" src="../video/test.vtt" type="text/plain" srclang="en" label="English" default />
</video>

CSS:

.menu-btn {
  z-index: 1000;
  position: absolute;
  top: 10px;
  left: 10px;
}

jQuery:

videojs("myPlayer").on('mouseout', function() {
  $(".menu-btn").addClass('vjs-fade-out');
});

videojs("myPlayer").on('mouseover', function() {
  $(".menu-btn").removeClass('vjs-fade-out');
});

videojs("myPlayer").on('tap', function() {
  if (videojs("myPlayer").userActive()) {
    $(".menu-btn").removeClass('vjs-fade-out');
  } else {
    //do nothing
  }
}, 1500);

我想使用 userActive 将其更改为这样的内容:

$(document).ready(function() {
  if (videojs("myPlayer").userActive()) {
    $(".menu-btn").removeClass('vjs-fade-out');
  } else {
    $(".menu-btn").addClass('vjs-fade-out');
  }
});

Answer 1

我想我找到了答案

myPlayer.on("useractive", function() {
  $(".menu-btn").removeClass("vjs-fade-out");
});

myPlayer.on("userinactive", function() {
  $(".menu-btn").addClass("vjs-fade-out");
});