css - 如何以圆形显示 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 和视频元素的样式。将 -webkit-mask-image
添加到包含的 div。

The -webkit-mask-image CSS property sets the mask image for an element. A mask image clips the visible portion of an element according to the mask image's transparency.

下面的代码创建了一个任意的圆形径向渐变用作蒙版，但您也可以使用 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;
}

不幸的是，您会丢失默认 Controller ，但是有很多方法可以构建您自己的自定义 Controller :

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