Android移动端WebView中HTML video播放按钮左偏问题求助

问题原因 #

Android原生WebView（尤其是旧版本）对HTML5 Video的默认控件样式存在渲染差异，原生播放按钮未按预期居中，导致偏移至左侧。而桌面端及响应式WebView采用的是桌面浏览器（如Chrome）的控件渲染逻辑，因此显示正常。

可行解决方案 #

1. 禁用原生控件，自定义播放UI（推荐） #

完全接管视频控件的样式，彻底避免系统控件的兼容性问题：

<div style="position: relative; width: 320px; height: 240px;">
  <video id="customVideo" width="100%" height="100%">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
  </video>
  <button 
    style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; background: rgba(0,0,0,0.7); border: none; color: white; font-size: 24px; cursor: pointer;"
    onclick="toggleVideoPlay()"
  >▶</button>
</div>

<script>
  const video = document.getElementById('customVideo');
  const playBtn = document.querySelector('button');

  function toggleVideoPlay() {
    video.paused ? video.play() : video.pause();
  }

  video.addEventListener('play', () => playBtn.textContent = '⏸');
  video.addEventListener('pause', () => playBtn.textContent = '▶');
</script>

2. 强制覆盖WebView原生控件样式 #

通过WebKit私有CSS伪元素调整播放按钮位置（仅对基于WebKit的Android WebView有效，部分新版本可能失效）：

/* 修正播放按钮居中 */
video::-webkit-media-controls-play-button {
  position: absolute;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* 确保控件容器整体居中对齐 */
video::-webkit-media-controls {
  justify-content: center !important;
}

3. 调整Android应用的WebView配置（原生代码层） #

若你开发的是Android应用，可在原生代码中优化WebView设置，让其控件渲染更贴近桌面Chrome：

// Java代码示例
WebSettings webSettings = webView.getSettings();
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
// 启用硬件加速提升渲染兼容性
webView.setLayerType(View.LAYER_TYPE_HARDWARE, null);

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