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

Question

我已经用 chrome 和 firefox 制作了一个带有 css 样式的圆形视频:

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

当我用 Safari 打开它时，它首先加载圆形，但是当视频缩略图完全加载并显示视频控件时，它变成方形。

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

Answer 1

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

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

---

一种解决方案是使用 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)">   
   	<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>	
</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)。在跨浏览器兼容性方面，您显然需要做一些工作。

---

这就是我现在所拥有的。如果我能想到其他解决方案，我会报告。