HTML5视频标签上的黑框,仅限Safari 7(OSX Mavericks)

我有一个包含多个视频的图库设置.这些在我瞄准的每个浏览器(chrome/ie/firefox)上完美播放,除了safari; 但仅限于Safari 7/OSX Mavericks(其他版本的safari工作正常):它在视频上显示黑框,即使它们被显示为正在播放/加载(完成的视频将触发其videoended()功能,如预期,在其黑色背景背后).

即使将视频拉到画廊外,黑匣子也会出现在视频中,没有其他因素影响它们.有时并非所有视频在刷新时都会被黑色封面; 很少没人会.

这是其中一个视频标记的示例:

rjb.. 5

我在Mac OS X 10.9.x上遇到了与Safari 7.x相同的问题"小牛队 - 一个黑盒子会出现在Safari中代替HTML5视频.

之前添加视频控件的评论似乎确实解决了这个问题,但是却无法隐藏其他浏览器中的控件.

我们可以使用Shadow DOM来隐藏支持该属性的浏览器(Chrome 25 +,Opera 15+)中的控件,但在不支持它的浏览器中没有选择(Safari 3-7,IE 6-11).

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

您可以使用浏览器供应商特定的伪元素选择器通过寻址Shadow DOM来在一定程度上设置本机视频控件的样式,但这些控件在浏览器之间有所不同.

关于在全屏模式下隐藏原生HTML5视频控件的CSS-Tricks有一些有趣的讨论,并引用OzPlayer作为例子.

如果全屏视频不是您所追求的,或者如果控件可见是一个交易破坏者,那么似乎没有解决方案(除非您进行一些浏览器检测 - 尽管浏览器嗅探很糟糕!).

唉,似乎这种行为可能是小牛队(10.9)的Safari(7.0)中的一个错误,因为它不存在于Mountain Lion(10.8)上.