欢迎来到Stackoverflow乔斯，您可以使用鼠标进入和离开事件来实现这一点.

const video = document.getElementById('myvideo');

video.onmouseenter = function(){
  if(video.paused){
    video.play();
  }
}

video.onmouseleave = function(){
  if(!video.paused){
    video.pause();
  }
}

.video_wrapper{
  overflow: hidden;
  position: relative;
}

.video_wrapper video{
  height: auto;
  display:block;
  margin:auto;
}

.video_wrapper .eat_video{
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
}

.video_wrapper .video_hover{
  bottom: 0;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  z-index: 1;
}

.video_wrapper .live_video,
.video_wrapper .eat_video{
  -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
       -o-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;    
}

#myvideo:hover{
  cursor:pointer;
  transform:scale(1.25);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class=video_wrapper>
  <div class="live_video">
     <video loop muted class="video" id = 'myvideo' preload="auto">
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" >
     </video>
  </div>     
</div>

• “如何在悬停时播放视频（以25%的宽度增量）"*

在HTML中...

• 创建一个<div>，它是四个<video>标记的容器。

在Javascript中...

• 向Div添加一个mousemove侦听器，然后将鼠标的X位置提取到某个变量中。
• 将Div的宽度（* 例如：* .clientWidth值）除以4（以获得所需的四个25%）。
• 当鼠标移动时，检查X-pos变量以查看指针位于哪个象限。这意味着使用比率和modulo运算符来获得1到4之间的数字结果。
• 使用结果编号告诉特定的视频标记为.visble（其余标记变为.hidden）。
  **PS：**我建议在屏幕上显示一个文本来显示鼠标在Div上的位置，这样你就可以看到计算机看到的内容。使用Div的.innerHTML或.innerText来添加文本。

在上面列出的几点上尝试更新你的代码，我会帮助你解决你遇到的问题。当你对你的视频/鼠标代码的问题有疑问时，请询问任何问题。

我相信这正是你要找的。）希望这有帮助。

$('.video_wrapper').on("mousemove", function (event) {
  if(event.pageY <= $('.video_wrapper').height()){
    if(event.pageX <= $('.video_wrapper').width()/4){
      $('.video_clip').removeClass('isHover');
      $('.first_video').addClass('isHover');
    } else if(event.pageX <= $('.video_wrapper').width()/2){
      $('.video_clip').removeClass('isHover');
      $('.second_video').addClass('isHover');
    } else if(event.pageX <= $('.video_wrapper').width()*3/4){
      $('.video_clip').removeClass('isHover');
      $('.third_video').addClass('isHover');
    } else {
      $('.video_clip').removeClass('isHover');
      $('.fourth_video').addClass('isHover');
    }
  }
});

$('.video_wrapper').on("mouseleave", function (event) {
  $('.video_clip').removeClass('isHover');
  $('.first_video').addClass('isHover');
});

.video_wrapper {
  overflow: hidden;
  position: relative;
}

.video_wrapper video {
  height: auto;
  width: 100vw;
}

.video_wrapper .video_clip:not(.first_video) {
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
}

.video_wrapper .video_clip {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.video_wrapper .video_clip {
  opacity: 0;
}
.video_wrapper .isHover.video_clip {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class=video_wrapper>
  <div class="video_clip first_video isHover">
    <video muted class="video" autoplay="autoplay" loop="loop" preload="auto">
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" >
     </video>
  </div>
  <div class="video_clip second_video">
    <video muted class="video" autoplay="autoplay" loop="loop" preload="auto">
        <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" >
     </video>
  </div>
  <div class="video_clip third_video">
    <video muted class="video" autoplay="autoplay" loop="loop" preload="auto">
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" >
     </video>
  </div>
  <div class="video_clip fourth_video">
    <video muted class="video" autoplay="autoplay" loop="loop" preload="auto">
        <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" >
     </video>
  </div>
</div>