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

Question

你好，

我的网站上有一个 HTML 5 视频播放器。每当我单击暂停或悬停视频时，都会出现奇怪的黑色阴影。它覆盖了控制部分。我怎样才能摆脱它。我试图为此搜索解决方案，但找不到解决方案。请帮我解决一下这个。

Answer 1

视频控制面板的 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 外观：无；

请参阅有关此要点的更多信息