如何在Chrome浏览器中实现Firefox式的居中大型视频播放按钮？

当然可以搞定！Chrome自带的视频控件确实和Firefox的样式差别不小，尤其是播放按钮的大小和位置——Firefox的中央大按钮确实更醒目。下面给你一个轻量的实现方案，既能保留Chrome原生控件的功能，又能模拟出那种大播放按钮的效果：

实现思路 #

我们通过在原生<video>元素外层添加一个容器，然后叠加一个自定义的中央播放按钮，利用CSS定位控制按钮位置，再通过JavaScript监听视频的播放/暂停/结束状态，来控制按钮的显示与隐藏。

完整代码示例 #

HTML结构

<div class="video-container">
  <video id="customVideo" src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/a4/BBH_gravitational_lensing_of_gw150914.webm/BBH_gravitational_lensing_of_gw150914.webm.480p.webm" width="100%" controls></video>
  <button class="custom-play-btn" id="customPlayBtn">▶</button>
</div>

CSS样式

.video-container {
  position: relative;
  width: 100%;
  /* 可根据需求调整最大宽度 */
  max-width: 800px;
  margin: 0 auto;
}

.custom-play-btn {
  position: absolute;
  /* 居中定位 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 设置按钮大小和样式 */
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  font-size: 40px;
  cursor: pointer;
  /* 默认隐藏，按需显示 */
  display: none;
  /* 确保按钮在视频控件上方 */
  z-index: 10;
}

/* 视频未播放且暂停时显示自定义按钮 */
.video-container video:not(:playing) + .custom-play-btn {
  display: block;
}

/* 鼠标悬停时增强按钮效果 */
.custom-play-btn:hover {
  background-color: rgba(0, 0, 0, 0.9);
}

JavaScript逻辑

const video = document.getElementById('customVideo');
const playBtn = document.getElementById('customPlayBtn');

// 点击自定义按钮触发视频播放
playBtn.addEventListener('click', () => {
  video.play();
});

// 视频播放时隐藏自定义按钮
video.addEventListener('play', () => {
  playBtn.style.display = 'none';
});

// 视频暂停（非结束状态）时显示按钮
video.addEventListener('pause', () => {
  if (!video.ended) {
    playBtn.style.display = 'block';
  }
});

// 视频播放结束时显示按钮，方便重播
video.addEventListener('ended', () => {
  playBtn.style.display = 'block';
});

效果说明 #

• 页面加载完成后，视频中央会显示一个大圆形播放按钮，和Firefox的效果类似；
• 点击按钮后视频开始播放，按钮自动隐藏；
• 视频暂停（未播放结束）或播放结束时，按钮会重新显示；
• 原生的Chrome视频控件依然保留，不影响音量、进度条等功能的使用。

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