如何在video标签中恢复Chrome 66样式的音量滑块控制？

我来帮你搞定这个问题！先梳理下你的场景和需求：

首先你用的原生Video标签代码是这样的：

<video controls playsinline> 
  <source src="url.mp4" type="video/mp4"> 
</video>

在Chrome 67版本之前，这个标签的控制栏自带可调节音量的滑块；但从Chrome 67开始，原生控件只保留了静音/取消静音的按钮，没有了滑块调节功能。

看看前后的对比：
Chrome 67前的音量控件

Chrome 67及之后的音量控件

你的核心需求是：在没有物理音量键的大型触控屏设备上，必须恢复原有的音量调节滑块，但controlslist属性没有对应的选项，想知道怎么用CSS、JS或者HTML5实现。

下面给你几个靠谱的解决方案，按实用性排序：

方案一：完全自定义视频控制栏（最推荐，生产环境可用） #

这是最稳定的方法，完全脱离浏览器原生控件的限制，自己实现一套符合需求的控件。

具体步骤： #

1. 隐藏原生控件：要么直接去掉video标签的controls属性，要么用CSS强制隐藏：

video::-webkit-media-controls {
  display: none !important;
}

2. 搭建自定义控件的HTML结构：

<div class="video-container">
  <video playsinline id="customVideo">
    <source src="url.mp4" type="video/mp4">
  </video>
  <!-- 自定义控制栏 -->
  <div class="video-controls">
    <button id="playPauseBtn">▶</button>
    <input type="range" id="progressBar" min="0" max="100" value="0">
    <!-- 重点：我们需要的音量滑块 -->
    <input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="1">
    <button id="muteBtn">🔊</button>
    <button id="fullscreenBtn">⛶</button>
  </div>
</div>

3. 添加CSS美化控件：适配触控屏的操作手感，比如调大点击区域：

.video-container {
  position: relative;
  width: 100%;
  max-width: 1000px; /* 适配大屏设备 */
}

video {
  width: 100%;
  display: block;
}

.video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.8);
  padding: 15px;
  display: flex;
  gap: 15px;
  align-items: center;
}

.video-controls button {
  background: transparent;
  color: white;
  border: none;
  font-size: 24px; /* 放大按钮，适合触控 */
  cursor: pointer;
  padding: 8px 12px;
}

.video-controls input[type="range"] {
  height: 6px;
  cursor: pointer;
  accent-color: #2196F3;
}

#volumeSlider {
  width: 120px; /* 给音量滑块足够的调节空间 */
}

4. 绑定JavaScript逻辑：让控件真正工作起来：

const video = document.getElementById('customVideo');
const playPauseBtn = document.getElementById('playPauseBtn');
const progressBar = document.getElementById('progressBar');
const volumeSlider = document.getElementById('volumeSlider');
const muteBtn = document.getElementById('muteBtn');
const fullscreenBtn = document.getElementById('fullscreenBtn');

// 播放/暂停功能
playPauseBtn.addEventListener('click', () => {
  if (video.paused) {
    video.play();
    playPauseBtn.textContent = '⏸';
  } else {
    video.pause();
    playPauseBtn.textContent = '▶';
  }
});

// 进度条同步与控制
video.addEventListener('timeupdate', () => {
  if (!video.duration) return;
  const progressPercent = (video.currentTime / video.duration) * 100;
  progressBar.value = progressPercent;
});

progressBar.addEventListener('input', () => {
  const targetTime = (progressBar.value / 100) * video.duration;
  video.currentTime = targetTime;
});

// 音量滑块控制
volumeSlider.addEventListener('input', () => {
  video.volume = volumeSlider.value;
  // 同步静音按钮状态
  muteBtn.textContent = video.volume === 0 ? '🔇' : '🔊';
});

// 静音切换
muteBtn.addEventListener('click', () => {
  video.muted = !video.muted;
  if (video.muted) {
    muteBtn.textContent = '🔇';
    volumeSlider.value = 0;
  } else {
    muteBtn.textContent = '🔊';
    volumeSlider.value = video.volume || 0.5;
  }
});

// 全屏功能
fullscreenBtn.addEventListener('click', () => {
  if (!document.fullscreenElement) {
    video.requestFullscreen().catch(err => {
      console.log('进入全屏失败:', err);
    });
  } else {
    document.exitFullscreen();
  }
});

// 视频结束后重置播放按钮
video.addEventListener('ended', () => {
  playPauseBtn.textContent = '▶';
});

方案二：通过Chrome实验性Flag恢复原生滑块（仅适合可控设备） #

如果你的设备是完全可控的（比如内部使用的触控屏设备），可以通过开启Chrome的隐藏flag来强制恢复原生滑块：

1. 在Chrome地址栏输入 chrome://flags/#enable-media-volume-slider
2. 将该选项设置为「Enabled」
3. 重启Chrome即可生效

⚠️ 注意：这个方法依赖浏览器的实验性功能，随时可能被官方移除，绝对不适合生产环境或公开访问的应用。

方案三：使用第三方视频库（快速实现） #

如果不想自己写太多代码，可以直接用成熟的第三方视频播放器库，它们都自带完善的音量控制功能：

• Video.js：老牌开源视频库，兼容性强，自定义程度高
• Plyr：轻量级、现代化的播放器，默认就有音量滑块

以Video.js为例，快速集成步骤：

1. 引入库的资源：

<link href="https://vjs.zencdn.net/8.6.1/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/8.6.1/video.min.js"></script>

2. 使用Video.js的标签结构：

<video
  id="my-video"
  class="video-js"
  controls
  playsinline
  data-setup='{}'
>
  <source src="url.mp4" type="video/mp4" />
</video>

这样就能直接得到带音量滑块的控制栏，无需额外配置，还能轻松自定义样式。

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