Css 将响应SVG图像掩码应用于HTML5视频
我已经做了一天的搜索前张贴，但没有运气 我的问题：Css 将响应SVG图像掩码应用于HTML5视频,css,html,svg,html5-video,alpha-transparency,Css,Html,Svg,Html5 Video,Alpha Transparency,我已经做了一天的搜索前张贴，但没有运气 我的问题： 我有一个HTML5视频，包装上有纯色（如蓝色）背景（图1）。 我想在视频上应用一个双色.png1440x900图像遮罩（图2），以便最终获得一个具有一些透明部分的视频，对应于图像遮罩的黑色方块（并且遮罩应与视频成比例缩放，以便以某种方式响应） 实际发生的情况 通过尝试的解决方案（见下文），我什么也看不到（最新的Chrome和Firefox）：页面完全是蓝色的，视频开始播放 我尝试的 我尝试了一些演示，但在这两个例子中，应用的遮罩都不是用图像制
我有一个HTML5视频，包装上有纯色（如蓝色）背景（图1）。
我想在视频上应用一个双色
.png通过尝试的解决方案（见下文），我什么也看不到（最新的Chrome和Firefox）：页面完全是蓝色的，视频开始播放 我尝试的
我尝试了一些演示，但在这两个例子中，应用的遮罩都不是用图像制作的。这是我正在尝试的基本代码
<!DOCTYPE html>
<head>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style>
body {
background: #5a91b4;
}
div {
width: 1440px;
}
video {
width: 100%;
mask:url('#imask');
-webkit-mask:url('mask.svg');
}
</style>
</head>
<body>
<div>
<video autoplay controls>
<source src="http://www.html5multimedia.com/code/media/parrots-small.mp4" type="video/mp4">
<source src="http://www.html5multimedia.com/code/media/parrots-small.webm" type="video/webm">
</video>
</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1440 900">
<defs>
<mask id="imask" >
<image width="1440" height="900" xlink:href="http://copy.com/TCImDzmSoq8CrU8W/mask.png"></image>
</mask>
</defs>
</svg>
</body>
</html>
身体{
背景：#5a91b4；
}
div{
宽度：1440px；
}
录像带{
宽度：100%；
掩码：url（“#imask”）；
-webkit掩码：url（'mask.svg'）；
}
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="vmask" preserveAspectRatio="xMinYMin"
viewBox="0 0 1440 900"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask>
<image width="1440" height="900" xlink:href="http://copy.com/TCImDzmSoq8CrU8W/mask.png"></image>
</mask>
</defs>
</svg>
提前感谢各位，我对SVG不太清楚，但在画布上这很容易。你所需要做的就是把视频复制到画布上，然后做源代码
当然，您会遇到无法访问不在同一域中的视频的问题：//如果您在纯SVG中转换掩码，它将在本演示中正常工作 svg位于 这是mask.svg
imagemagick+potracepngsvg