2

I am currently using video.js on my website.

I have made controls false, which also hides the play button.

I am looking to have the play button display only when the video is paused, and not display whilst the video is playing.

I tried the following , but it doesn't work.

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

Thank you!

3 Answers 3

6

I'm very late, with pure CSS for Videojs 5+ (Don't know if it work on older version)

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

Your code is almost correct. The event is actually "pause", not "paused" and you will need to add code to rehide the button when playback resumes:

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

Also, make sure that the ID of your player is set to "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>
0

I had the same problem. In my case, the button needed to appear in the end (so the user could replay the video) and had to be hidden once the user has clicked to play.

I solved like this:

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

    $(this).load();

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.