html实现三个视频可以通过鼠标滚轮以及按钮实现上下轮播，并且按钮出现在视频最右边，视频右边同时有点赞收藏按钮

要实现HTML视频的上下轮播和带有点赞和收藏按钮，可以使用HTML、CSS和JavaScript来实现。以下是一个简单的示例：

HTML代码：

<div id="video-container">
  <div class="video-wrapper">
    <video class="video-player" src="video1.mp4"></video>
    <div class="video-buttons">
      <button class="like-btn">Like</button>
      <button class="collect-btn">Collect</button>
    </div>
  </div>
  <div class="video-wrapper">
    <video class="video-player" src="video2.mp4"></video>
    <div class="video-buttons">
      <button class="like-btn">Like</button>
      <button class="collect-btn">Collect</button>
    </div>
  </div>
  <div class="video-wrapper">
    <video class="video-player" src="video3.mp4"></video>
    <div class="video-buttons">
      <button class="like-btn">Like</button>
      <button class="collect-btn">Collect</button>
    </div>
  </div>
  <div class="scroll-btns">
    <button id="prev-btn">Prev</button>
    <button id="next-btn">Next</button>
  </div>
</div>

CSS代码：

#video-container {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.video-wrapper.active {
  display: block;
}

.video-player {
  width: 100%;
  height: 100%;
}

.video-buttons {
  position: absolute;
  top: 10px;
  right: 10px;
}

.scroll-btns {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.scroll-btns button {
  display: block;
  margin-bottom: 10px;
}

.like-btn, .collect-btn {
  display: block;
  margin-bottom: 10px;
}

JavaScript代码：

var videoWrappers = document.querySelectorAll('.video-wrapper');
var prevBtn = document.getElementById('prev-btn');
var nextBtn = document.getElementById('next-btn');
var videoIndex = 0;

videoWrappers[videoIndex].classList.add('active');

prevBtn.onclick = function() {
  if (videoIndex > 0) {
    videoIndex--;
    videoWrappers.forEach(function(wrapper) {
      wrapper.classList.remove('active');
    });
    videoWrappers[videoIndex].classList.add('active');
  }
};

nextBtn.onclick = function() {
  if (videoIndex < videoWrappers.length - 1) {
    videoIndex++;
    videoWrappers.forEach(function(wrapper) {
      wrapper.classList.remove('active');
    });
    videoWrappers[videoIndex].classList.add('active');
  }
};

window.addEventListener('wheel', function(e) {
  if (e.deltaY < 0) {
    prevBtn.click();
  }
  else {
    nextBtn.click();
  }
});

在上面的示例中，我们首先将三个视频添加到HTML代码中，并为每个视频添加点赞和收藏按钮。然后，我们使用CSS将视频容器设置为相对位置，并将每个视频设置为绝对位置。我们还将视频容器的高度设置为500px，并使用overflow属性隐藏溢出内容。我们还将按钮容器设置为绝对位置，并将按钮放在视频的右上角和右下角。

然后，我们使用JavaScript为前进和后退按钮添加onclick事件处理程序。当用户点击按钮时，我们会检查当前视频的索引，并将其更改为下一个或上一个视频的索引。然后，我们将所有视频容器的类名设置为非活动状态，并将当前视频容器的类名设置为活动状态。这会显示当前视频并隐藏其他视频。

最后，我们使用JavaScript为鼠标滚轮事件添加事件处理程序。当用户滚动鼠标滚轮时，我们检查滚动方向并模拟相应的按钮单击事件。这将导致视频进行相应的上下轮播。