Show pause/play icons when hover/mouseenter over video-CodePudding

So this code works as expected. Hover/mouseenter/mouseleave shows and displays the pause/play icons correctly.

The issue I have is on page load the pause icon doesn't show on Hover/mouseenter? It only works after first click... Any help appreciated, thank you.

// HTML
<div >
  <div > </div>
  <video autoplay muted loop id="myVideo">
  <source src="img/video.mp4" type="video/mp4" />
  </video>
</div>
// END HTML

// jQuery
// Show video Play/Pause icons
$("#myVideo").mouseenter(function() {
    $('.video-controls').show();
}).mouseleave(function() {
    $('.video-controls').hide();
});


// Pause/Play video on hover
$("#myVideo").bind("click", function () {
  var vid = $(this).get(0);
      if (vid.paused) {
        vid.play();
        $('.video-controls').html('<i ></i>');
      } else {
        vid.pause();
        $('.video-controls').html('<i ></i>');
      }
  });

CodePudding user response：

thank your question,

here is the solution try out once

// HTML
<div >
  <div ><i ></i></div>
  <video autoplay muted loop id="myVideo">
  <source src="img/video.mp4" type="video/mp4" />
  </video>
</div>
// END HTML

// jQuery
// Show video Play/Pause icons
$("#myVideo").mouseenter(function() {
    $('.video-controls').show();
}).mouseleave(function() {
    $('.video-controls').hide();
});


// Pause/Play video on hover
$("#myVideo").bind("click", function () {
  var vid = $(this).get(0);
      if (vid.paused) {
        vid.play();
        $('.video-controls').html('<i ></i>');
      } else {
        vid.pause();
        $('.video-controls').html('<i ></i>');
      }
  });

I found that after click event you have binded html so we need default state so just put default video control to play icon.

Hope this will sort your query.

CodePudding user response：

"The issue I have is on page load the pause icon doesn't show on Hover/mouseenter?
It only works after first click."

You can try listening for a hover event instead of binding (connecting) to a click event:

//# Pause/Play video on hover
// $("#myVideo").bind("click", function () {

$("#myVideo").hover(function() {
    var vid = $(this).get(0);
      if (vid.paused) {
        vid.play();
        $('.video-controls').html('<i ></i>');
      } else {
        vid.pause();
        $('.video-controls').html('<i ></i>');
      }
  });