图片上有播放的按钮，移上去按钮消失，播放视频

这种效果通常使用CSS实现，可以通过给图片容器添加hover事件，然后设置按钮的样式为hover时不显示，当鼠标移开时，按钮重新显示。同时，可以在CSS中为按钮添加点击事件，使其点击后播放视频。以下是一个简单的示例代码：

<div class="image-container">
  <img src="example.jpg" alt="example">
  <button class="play-button"></button>
  <video src="example.mp4" class="video-player"></video>
</div>

<style>
  .image-container {
    position: relative;
    width: 500px;
    height: 300px;
  }

  .image-container:hover .play-button {
    display: none;
  }

  .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
  }

  .video-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
  }

  .video-player.active {
    display: block;
  }
</style>

<script>
  const playButton = document.querySelector('.play-button');
  const videoPlayer = document.querySelector('.video-player');

  playButton.addEventListener('click', () => {
    videoPlayer.classList.add('active');
    videoPlayer.play();
  });
</script>

需要注意的是，这只是一个简单的示例代码，实际应用中可能需要根据具体情况进行修改和完善。