Question

我在将一个PNG掩码应用到MP4文件时遇到了一些问题。不确定我在哪里出错。

html就像

<html>
<body>
    <video id="wee" autoplay src="dosebotdesigns.com/smoke.mp4">
</body>
</html>

和css读取，

#wee {
  mask-image: url(dosebotdesigns.com/test4.png);
}

随意检查这个JSFiddle： https://jsfiddle.net/tyd8wggr/

我的主要目标是让png蒙版成为烟雾视频。谢谢你的时间！

Answer 1

此标记具有实验性，并且在许多浏览器中都不起作用，请参阅its compatibility matrix。也就是说，只需将-webkit-mask-image: url(http://dosebotdesigns.com/test4.png);添加到您现有的CSS中，它在Chrome 55ish中对我来说效果很好。

*（好吧，＆＃34;工作正常＆＃34;因为显示，您需要进行一些调整以解决图像和视频之间的宽高比差异）

编辑：我认为您正在寻找类似this的内容。

Answer 2

它应该-webkit-mask-image才能使用Chrome，但它现在仅适用于某些浏览器。

在视频html / css上应用png掩码

2 个答案: