如何移除HTML页面嵌入视频底部播放按钮并添加至视频中央？

要把视频底部的原生播放按钮隐藏，换成中央的自定义按钮，得放弃原生的controls控件，自己实现一套播放控制逻辑，具体步骤如下：

1. 调整HTML结构 #

给视频套一个容器，用来承载视频和自定义播放按钮，同时保留缩略图设置（这里沿用你之前的视频片段缩略图思路，用原生poster属性实现）：

<div class="video-container">
  <video width="100%" preload="metadata" poster="https://www.w3schools.com/html/mov_bbb.mp4#t=0.1">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
  <!-- 自定义中央播放按钮 -->
  <button class="play-btn">▶</button>
</div>

2. 用CSS布局和隐藏原生控件 #

通过CSS让容器变成相对定位，把播放按钮固定在视频中央，同时确保视频不显示原生控件（已经去掉了controls属性）：

.video-container {
  position: relative;
  max-width: 100%;
  cursor: pointer;
}

.video-container video {
  display: block;
  width: 100%;
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border: none;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.play-btn:hover {
  background-color: rgba(0, 0, 0, 0.9);
}

/* 播放状态下隐藏按钮 */
.video-container.playing .play-btn {
  display: none;
}

3. 用JavaScript实现播放/暂停逻辑 #

给按钮和视频绑定事件，点击时切换播放状态，同时更新按钮的显示：

const videoContainer = document.querySelector('.video-container');
const video = videoContainer.querySelector('video');
const playBtn = videoContainer.querySelector('.play-btn');

// 点击按钮或视频触发播放/暂停
function togglePlay() {
  if (video.paused) {
    video.play();
    videoContainer.classList.add('playing');
  } else {
    video.pause();
    videoContainer.classList.remove('playing');
  }
}

playBtn.addEventListener('click', togglePlay);
video.addEventListener('click', togglePlay);

// 视频结束后重新显示播放按钮
video.addEventListener('ended', () => {
  videoContainer.classList.remove('playing');
});

补充说明 #

• 如果你之前用的是自定义缩略图层（而非原生poster），只需把缩略图元素放在容器里，点击缩略图时先隐藏缩略图再触发播放即可。
• 原生controls控件的样式受浏览器限制，没法直接修改按钮位置，自定义控件是最灵活的解决方式。

内容的提问来源于stack exchange，提问作者newuser