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

【问题标题】：html5 video player remove black shadow at bottom of controls sectionhtml5 视频播放器删除控件部分底部的黑色阴影
【发布时间】：2018-08-07 05:49:42
【问题描述】：

嗨，

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

【问题讨论】：

请修正您的 Markdown 格式。请附上您的实际代码。

标签： php html css video html5-video

【解决方案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-外观：无；

参考更多on this gist

【讨论】：

【解决方案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 {}

【讨论】：

我已经绑定了 Urek Mazino.. 仍然无法正常工作

【解决方案3】：

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

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

【讨论】：