视频hover显示暂停/播放图标 首次加载悬停不显示暂停图标问题

首次加载时.video-controls容器内部没有任何图标元素，你的图标渲染逻辑只写在了视频的click事件回调里，首次点击前容器是空的——哪怕mouseenter事件正常触发把容器设为显示状态，用户也看不到任何图标，就会出现“移入不显示暂停按钮”的现象。
你的视频默认配置了autoplay属性，页面加载完成后视频会自动进入播放状态，对应控制栏本就应该默认显示暂停图标，这部分初始逻辑缺失是问题的核心。

直接在DOM加载完成后初始化控制栏的默认图标即可，调整后的完整jQuery逻辑如下：

$(function() {
  // 初始化：视频默认自动播放，先注入暂停图标
  $('.video-controls').html('<i class="fas fa-pause-circle pause"></i>');

  // 移入显示控制栏、移出隐藏
  $("#myVideo")
    .mouseenter(function() {
      $('.video-controls').show();
    })
    .mouseleave(function() {
      $('.video-controls').hide();
    });

  // 点击切换播放状态，同步更新图标
  $("#myVideo").on("click", function() {
    const videoEl = this;
    if (videoEl.paused) {
      videoEl.play();
      $('.video-controls').html('<i class="fas fa-pause-circle pause"></i>');
    } else {
      videoEl.pause();
      $('.video-controls').html('<i class="fas fa-play-circle play"></i>');
    }
  });
});

注：原代码使用的bind方法已从jQuery 3.0开始不推荐使用，替换为on即可，功能完全一致。

如果要减少DOM操作提升性能，可以直接在HTML结构里提前写好两个图标，通过CSS控制显示隐藏，不需要每次点击都重写容器内容：

<div class="video-container">
  <div class="video-controls">
    <i class="fas fa-pause-circle pause"></i>
    <i class="fas fa-play-circle play" style="display: none;"></i>
  </div>
  <video autoplay muted loop id="myVideo">
    <source src="img/video.mp4" type="video/mp4" />
  </video>
</div>

对应点击事件只需要切换两个图标的显示状态即可：

$("#myVideo").on("click", function() {
  const videoEl = this;
  if (videoEl.paused) {
    videoEl.play();
    $('.video-controls .pause').show();
    $('.video-controls .play').hide();
  } else {
    videoEl.pause();
    $('.video-controls .pause').hide();
    $('.video-controls .play').show();
  }
});

内容的提问来源于stack exchange，提问作者riospereira