How to implement play() and pause() on HTML5 Video in jQuery?-CodePudding

I have a HTML video with a DIV containing custom controls over it.

The play button works fine, but the pause button does not. There are two weird things happening:

The media.pause() method just does not seem to work at all, as if it were not there.
The .addClass() and .removeClass() methods after media.pause() are not working either. But when I put console.log('anything') below it in the code, then it prints to the console. Also, the objects that it is called on are there (I used console.log to check).

// play video
$('.funnel-video-poster').on('click', function() {

  var video_id = $(this).data('video-id');

  document.getElementById(video_id).play();

  $(this).find('.FVP-btn-play').addClass('hidden');
  $(this).find('.FVP-btn-pause').removeClass('hidden');
});

// pause video
$('.FVP-btn-pause').on('click', function() {

  var $poster = $(this).closest('.funnel-video-poster'),
    video_id = $poster.data('video-id');

  var media = document.querySelector('#'   video_id);
  media.pause();

  console.log(media);

  $poster.find('.FVP-btn-play').removeClass('hidden');
  $poster.find('.FVP-btn-pause').addClass('hidden');

  console.log($poster.find('.FVP-btn-play'));
  console.log($poster.find('.FVP-btn-pause'));
});

.funnel-block .funnel-video video {
    display: block;
    margin: 0 auto;
}

.funnel-block .funnel-video .funnel-video-poster {
    background-repeat: no-repeat;
    position: relative;
    z-index: 2;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}

.funnel-block .funnel-video .funnel-video-poster.see-thru {
    background: transparent !important;
}

.funnel-block .funnel-video .funnel-video-poster .FVP-btn-play {
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    background: #3c3c3c;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    border-radius: 50%;
}

.funnel-block .funnel-video .funnel-video-poster .FVP-btn-pause {    
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    background: #3c3c3c;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    position: absolute;
    bottom: .25rem;
    left: 50%;
    transform: translate(-50%, 0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >


  <div >
    <video poster="https://www.tomasbradle.eu/webroot/stored_data/funnel_videos/funnel_block_50_ea8dec6d.png" id="funnel_video_50" equalizer-state="attached" width="640" height="360">
      <source src="https://www.tomasbradle.eu/webroot/stored_data/funnel_videos/funnel_block_50_ea8dec6d.mp4">
      Your browser does not support HTML 5 video
    </video>
    <div  data-video-id="funnel_video_50" style="width:640px;height:360px;margin-top:-360px">
      <div >Play</div>
      <div >Pause</div>
    </div>
  </div>
</div>

CodePudding user response：

Here is the way that I implemented the play and pause functionality in jQuery:

    $('.FVP-btn-play').on('click', function() {
      $('video').trigger('play');

      $('.FVP-btn-play').toggleClass('hidden');
      $('.FVP-btn-pause').toggleClass('hidden');
    });

    $('.FVP-btn-pause').on('click', function() {
      $('video').trigger('pause');

      $('.FVP-btn-play').toggleClass('hidden');
      $('.FVP-btn-pause').toggleClass('hidden');
    });

In the HTML, I moved the hidden class from Play to Pause as this is the state of the application to start with.

I did not change the CSS, apart from adding a hidden class, which was not included.

I used jQuery toggleClass() to add and remove the hidden class on the Play and Pause buttons.

Here is a working solution based on your code (best viewed in full screen mode):

$('.FVP-btn-play').on('click', function() {
  $('video').trigger('play');

  $('.FVP-btn-play').toggleClass('hidden');
  $('.FVP-btn-pause').toggleClass('hidden');
});

$('.FVP-btn-pause').on('click', function() {
  $('video').trigger('pause');

  $('.FVP-btn-play').toggleClass('hidden');
  $('.FVP-btn-pause').toggleClass('hidden');
});

.hidden {
  visibility: hidden;
}

.funnel-block .funnel-video video {
  display: block;
  margin: 0 auto;
}

.funnel-block .funnel-video .funnel-video-poster {
  background-repeat: no-repeat;
  position: relative;
  z-index: 2;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
}

.funnel-block .funnel-video .funnel-video-poster.see-thru {
  background: transparent !important;
}

.funnel-block .funnel-video .funnel-video-poster .FVP-btn-play {
  width: 3rem;
  height: 3rem;
  line-height: 3rem;
  background: #3c3c3c;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  border-radius: 50%;
}

.funnel-block .funnel-video .funnel-video-poster .FVP-btn-pause {
  width: 3rem;
  height: 3rem;
  line-height: 3rem;
  background: #3c3c3c;
  color: #fff;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  bottom: .25rem;
  left: 50%;
  transform: translate(-50%, 0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <video poster="https://www.tomasbradle.eu/webroot/stored_data/funnel_videos/funnel_block_50_ea8dec6d.png" id="funnel_video_50" equalizer-state="attached" width="640" height="360">
      <source src="https://www.tomasbradle.eu/webroot/stored_data/funnel_videos/funnel_block_50_ea8dec6d.mp4">
      Your browser does not support HTML 5 video
    </video>
    <div  data-video-id="funnel_video_50" style="width:640px;height:360px;margin-top:-360px">
      <div >Play</div>
      <div >Pause</div>
    </div>
  </div>
</div>

Here is one source of information about jQuery.

Here is a reference to the HTML video element documentation.