自定义HTML视频播放器

Question

我有一个具有这种结构的HTML视频播放器：

<div>
<video>
<source/>
</video>
</div>

我想以自定义的形状显示视频。也就是这样的东西(想象一下，这不是女人的照片，而是我的视频播放)：

​

​

Answer 1

您可以使用css掩码掩蔽您的视频在您想要的形状。只需用所需的形状制作图像，并使用掩模图像

参见下面的工作示例

​

.maskedVideo {
  -webkit-mask-image: url(https://i.postimg.cc/3RZc7kq5/path876.png);
  mask-image: url(https://i.postimg.cc/3RZc7kq5/path876.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;    
}

<video class="maskedVideo" width="400" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML video.
</video>

​