移动端HTML5 Video标签播放按钮过大问题求助

问题现状 #

• 未给video标签添加任何自定义CSS，但移动端浏览器中默认播放按钮尺寸异常偏大
• 尝试过以下CSS代码，但未解决问题：

video::-webkit-media-controls-play-button,
video::-webkit-media-controls-pause-button {
    max-width: 3rem !important;
    max-height: 3rem !important;
}

可行修复方法 #

1. 覆盖webkit媒体按钮的完整样式 #

部分移动端浏览器会给播放按钮设置min-width/min-height或内边距，仅限制max宽高无效，需一并覆盖：

video::-webkit-media-controls-play-button,
video::-webkit-media-controls-pause-button {
    width: 3rem !important;
    height: 3rem !important;
    max-width: 3rem !important;
    max-height: 3rem !important;
    min-width: unset !important;
    min-height: unset !important;
    padding: 0.5rem !important;
    border: none !important;
    border-radius: 50%; /* 可选：保持圆形按钮样式 */
}

2. 缩放整个媒体控制栏 #

如果按钮本身的样式无法单独调整，可对整个媒体控制容器进行缩放：

video::-webkit-media-controls {
    transform: scale(0.8); /* 按需调整缩放比例 */
    transform-origin: center bottom; /* 控制缩放原点，避免位置偏移 */
}

3. 替换为自定义播放控件（彻底解决兼容问题） #

若默认控件的兼容性问题难以调试，直接隐藏默认控件并实现自定义按钮：

HTML结构

<video id="myVideo" controls="false">
    <source src="your-video-source.mp4" type="video/mp4">
</video>
<div class="custom-player-controls">
    <button class="play-btn" id="playBtn">▶️</button>
</div>

CSS样式

/* 视频容器相对定位，用于放置自定义按钮 */
#myVideo {
    width: 100%;
    position: relative;
}

.custom-player-controls {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* 不遮挡视频点击 */
}

.play-btn {
    width: 3rem;
    height: 3rem;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 1.2rem;
    pointer-events: auto; /* 按钮可点击 */
    cursor: pointer;
}

JS交互逻辑

const video = document.getElementById('myVideo');
const playBtn = document.getElementById('playBtn');

playBtn.addEventListener('click', () => {
    if (video.paused) {
        video.play();
        playBtn.textContent = '⏸️';
    } else {
        video.pause();
        playBtn.textContent = '▶️';
    }
});

// 视频播放/暂停时同步按钮状态
video.addEventListener('play', () => {
    playBtn.textContent = '⏸️';
});

video.addEventListener('pause', () => {
    playBtn.textContent = '▶️';
});

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