如何修改视频播放结束后进度条背景色 去除进度条黑色阴影

解决方案 #

场景1：使用浏览器原生HTML5 <video> 控件 #

该阴影为浏览器默认伪元素自带的样式，直接添加CSS规则覆盖即可：

/* 覆盖Chrome、Edge等webkit内核浏览器的进度条阴影 */
video::-webkit-media-controls-timeline {
  box-shadow: none !important;
  outline: none !important;
}
video::-webkit-media-controls-progress-bar {
  background-image: none !important;
}

/* 覆盖Firefox浏览器的进度条阴影 */
video::-moz-range-progress {
  box-shadow: none !important;
}
video::-moz-range-thumb {
  box-shadow: none !important;
}

如果仅在视频暂停时才出现阴影，补充以下规则：

video:paused::-webkit-media-controls-timeline {
  box-shadow: none !important;
}

场景2：使用自定义播放器框架（如Video.js、Plyr等） #

• Video.js：找到.vjs-progress-control、.vjs-play-progress类对应的样式，移除box-shadow、渐变背景相关属性即可
• Plyr：修改.plyr__progress、.plyr__progress--played类的阴影属性，也可以在初始化时通过配置直接关闭进度条阴影效果：

  const player = new Plyr('#player', {
    progress: {
      disableShadow: true
    }
  })
  

场景3：本地/客户端播放器 #

在播放器设置中找到「进度条样式」「装饰效果」类选项，关闭阴影开关即可；部分播放器支持自定义皮肤，切换无阴影的皮肤也能解决问题。

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