html5视频播放器删除控件部分底部的黑色阴影

Question

嗨，

我的网站上有一个HTML 5视频播放器。每当我单击暂停或悬停视频时，就会出现奇怪的黑色阴影。它覆盖了控制部分。我该如何摆脱它。我试图为此寻找解决方案，但找不到解决方案。请帮助我。

Answer 1

这是对我有用的代码，尝试。

video::-webkit-media-controls-panel {
     background-image: linear-gradient(transparent, transparent); !important;
}

Answer 2

您可以尝试像这样添加CSS

video::-webkit-media-controls-panel {
   background-color: transparent !important;
   box-shadow: none !important
}

您还可以在CSS中使用其他伪代码来控制本地视频，例如

video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-volume-slider {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display {}

Answer 3

用于视频控制面板的webkit伪元素为

video::-webkit-media-controls-panel

要设置或更新此元素，只需添加此CSS

video::-webkit-media-controls-panel {
  // Your styling here
  background-image: linear-gradient(transparent, transparent) !important; //Transparent for your case

}

此外，请确保将样式标记为重要。温馨提示：您可能需要在目标/选定元素上设置此属性才能获得所需的样式结果：

-webkit-appearance：none;

引用更多on this gist