如何以圆形显示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.

该-webkit-mask-imageCSS属性的元素设置屏蔽图像.掩模图像根据掩模图像的透明度剪切元素的可见部分.

下面的演示创建一个任意圆形径向渐变用作蒙版,但您也可以使用url()为剪贴蒙版指定在线圆形PNG图像(如Mozilla文档中所示).

演示:http://jsbin.com/yozacun/edit？html,css,output

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