在菜单鼠标悬停时显示背景视频

Question

当我将鼠标悬停在菜单中的元素上时，我试图显示不同的视频。当我从一个视频转到另一个视频时，过渡一点也不流畅。

有谁知道我该怎么做？另外，有没有人知道在网页上处理大约 15 个短视频并加快加载速度的最佳方法？谢谢！

$(document).ready(function() {
  var image = $("body").find('video').attr('src');

  $("ul li a").mouseover(function() {
    var currentImage = $(this).attr('data-video');
    $(this).parent().parent().parent().find('video').attr("src", currentImage)
    $("body video").animate()
  })
})

body {
  background-color: cyan;
  margin: 0;
  padding: 0;
}

ul li {
  display: inline-block;
  width: 100%;
}

ul li a {
  color: grey;
  font-size: 90px;
  list-style: 1.2;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
}

video {
  position: fixed;
  top: 0;
  right: 0;
  overflow: hidden;
  z-index: -100;
  transition: all ease-in-out .5s;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video loop muted autoplay width="110%" height="auto">
  <source src="video1.mp4" type="video/mp4"/> 
</video>
<ul>
  <li><a data-video="video1.mp4" href="">First</a></li>
  <li><a data-video="video2.mp4" href="">Second</a></li>
  <li><a data-video="video3.mp4" href="">Third</a></li>
  <li><a data-video="video1.mp4" href="">Fourth</a></li>
</ul>