如何以圆形显示 HTML5 视频标签？

Question

我在 css "border-radius:100%;" 中试过这个，但它没有给出 100% 的圆。

以下是css和html

HTML

<div class="web-cam">

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>

</div>

CSS

.web-cam video {
  width: 250px;
  height: 250px;
  border-radius: 100%;
  position: absolute;
  top: 0px;
  z-index: 5;
}

Answer 1

分别设置包含 div 和 video 元素的样式。将 -webkit-mask-image 添加到包含的 div 中。

-webkit-mask-image CSS 属性设置元素的遮罩图像。蒙版图像根据蒙版图像的透明度裁剪元素的可见部分。

下面的代码创建了一个任意的圆形径向渐变以用作蒙版，但您也可以使用url() 为剪贴蒙版指定在线圆形PNG 图像（如Mozilla's doc 所示）。

HTML：

<div class="web-cam">
  <video controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
  </video>
</div>

CSS：

.web-cam { 
  width: 250px;
  height: 250px;
  border-radius: 125px;
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

video {
  width: 500px;
  height: 500px;
  position: absolute;
  top: -125px;
  left: -125px;
}

很遗憾，您将失去默认控制器，但有很多方法可以构建您自己的自定义控制器：

http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos

http://dev.opera.com/articles/custom-html5-video-player-with-css3-and-jquery/#sec1

http://www.adobe.com/devnet/html5/articles/html5-multimedia-pt3.html