Question

我目前在我的网站上使用video.js.

我将控件设为false，这也隐藏了播放按钮。

我希望只在视频暂停时显示播放按钮，而在播放视频时不显示。

我尝试了以下操作，但它不起作用。

videojs("myPlayer").ready(function(){
  var myPlayer = this;
  myPlayer.on("paused", function(){
    myPlayer.bigPlayButton.show();
  });
});

谢谢！

Answer 1

我很晚，使用Videojs 5+的纯CSS（不知道它是否适用于旧版本）

.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
   display: block;
}

Answer 2

您的代码几乎是正确的。该事件实际上是“暂停”，而不是“暂停”，您将需要添加代码以在播放恢复时重新隐藏按钮：

$(document).ready(function () {
   videojs("myPlayer").ready(function () {
      var myPlayer = this;
      myPlayer.on("pause", function () {
         myPlayer.bigPlayButton.show();
      });
      myPlayer.on("play", function () {
         myPlayer.bigPlayButton.hide();
      });
    });
});

另外，请确保将播放器的ID设置为“myPlayer”：

<video id='myPlayer' class='video-js vjs-default-skin' controls preload='none' width='640' height='360' data-setup='{}'>
   <source src='myVideo.mp4' type='video/mp4' />
   <p class='vjs-no-js'>To view this video please enable JavaScript.</p>
</video>

Answer 3

我遇到了同样的问题。在我的情况下，按钮需要显示在最后（因此用户可以重放视频），并且必须在用户点击播放后隐藏。

我这样解决了：

    mPlayer.on("play", function () {
        $('#moviePlayerHtml .vjs-big-play-button').css('display', 'none');
    });

    $(this).load();

Video.js仅在暂停时显示播放按钮

3 个答案: