Question

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

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

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

<video id="video-1a" width="958px" onended="videoEnded()">
    <source src="/assets/video/product-1a.mp4" type="video/mp4" />
    <source src="/assets/video/product-1a.webm" type="video/webm" /> 
</video>

Answer 1

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

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

<video preload="auto" loop="loop" controls="controls">
    <source src="/path/to/video.mp4" type="video/mp4" />
    <source src="/path/to/video.webm" type="video/webm" />
    <source src="/path/to/video.ogv" type="video/ogg" />
</video>

我们可以使用Shadow DOM隐藏browsers that support the property（Chrome 25 +，Opera 15+）中的控件，但在不支持它的浏览器中别无选择（Safari 3-7，IE 6- 11）。

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

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

有关CSS-Tricks关于以全屏模式隐藏原生HTML5视频控件的一些有趣讨论，并引用OzPlayer作为示例。

如果全屏视频不是您所追求的，或者如果控件可见是一个交易破坏者，那么似乎没有解决方案（除非您进行一些浏览器检测 - 虽然浏览器嗅探很糟糕！）。

唉，似乎这种行为可能是小牛队（10.9）上的Safari（7.0）中的一个错误，因为Mountain Lion（10.8）上不存在该错误。

Answer 2

投票@rjb诊断问题。另一种解决方法是使用setTimeout并在短时间（40 ms）后删除控件：

setTimeout(function(){
    $('#targetvid').removeAttr('controls');
}, 40);

我发现我也不能使用控件而只是在40毫秒后更改显示属性：

setTimeout(function(){
    $('#targetvid').css('display','block');
}, 40);

如果你想将它恢复到原来的显示属性（我们的是内联块），你可以在80毫秒后完成：

setTimeout(function(){
    $('#targetvid').css('display','block');
}, 40);
setTimeout(function(){
    $('#targetvid').css('display','inline-block');
}, 80);

这不是一个漂亮的JS黑客，但它适用于这个Safari bug。

HTML5视频标签上的黑框，仅限Safari 7（OSX Mavericks）

2 个答案: