如何在Safari浏览器上制作圆形视频播放器？

我已经做了一个圆圈形的视频与Chrome和Firefox与CSS样式：如何在Safari浏览器上制作圆形视频播放器？

-webkit-border-radius: 100%; 
-moz-border-radius: 100%; 
border-radius: 100%;

当我用Safari浏览器打开它，它第一次加载圆形状，但在视频缩略图完全加载和视频控件显示，它变成了方形。

我也尝试制作视频圈的父div和overflow:hidden，但没有任何效果。

来源

2015-04-01 Jan

我正在使用YouTube嵌入进行测试。请说明您的视频托管在哪个平台上，或者是否嵌入了HTML5 video元素。

这似乎与视频本身的大小有关。只有在将视频的大小减小到某个点之后，我才能够复制该问题。当iframe变得太小时，视频本身会在与控件分离的自己的容器内缩放。这似乎是border-radius没有采取的原因。这里有几个解决方案，尽管比简单地向iframe添加border-radius: 100%稍微复杂一些。

一种解决方案是使用SVG（见fiddle为SO不希望显示视频播放）：

svg { 
 
    display: block; 
 
    width: 560px; 
 
    height: 315px; 
 
}

<svg> 
 
    <clippath id="circle"> 
 
     <circle r="120" cx="50%" cy="50%"></circle> 
 
    </clippath> 
 
    
 
    <g clip-path="url(#circle)"> 
 
    \t <foreignObject width="560" x="0" 
 
       y="0" height="315"> 
 
     <iframe width="560" height="315" src="//www.youtube.com/embed/QnxLau7m600?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe> 
 
    </foreignObject> 
 
    </g> \t 
 
</svg>

另一种解决方案是使用一个-webkit-mask-image：

div { 
 
    width: 300px; 
 
    height: 300px; 
 
    border-radius: 100%; 
 
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); 
 
}

<div> 
 
    <iframe width="300" height="300" src="https://www.youtube.com/embed/QnxLau7m600" frameborder="0" allowfullscreen></iframe> 
 
</div>

您还可以通过使用mask属性使Firefox的这项工作，但你也将需要使用SVG而不是CSS梯度像mask: url(data:image/svg+xml;base64,...);（这种特殊的方法使用数据URI）。在跨浏览器兼容性方面，您显然需要做一些工作。

这就是我现在所拥有的。如果我能想到另一种解决方案，我会报告回来。

来源

2015-04-01 03:16:47

我使用的是HTML5视频标签。 – Jan 2015-04-01 05:20:49

如何在Safari浏览器上制作圆形视频播放器？

回答

相关问题