封面背景循环视频在HTML上不起作用

<video autoplay loop>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<style>
  .video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
  }

  .video-background video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: play 5s infinite;
  }

  @keyframes play {
    0% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
</style>

<div class="video-background">
  <video autoplay muted>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>