将响应式SVG图像蒙版应用于HTML5视频
Fabrizio Calderan喜欢树木
发布前我已经进行了一天的搜索，但是没有运气
我的问题：
我的包装中有HTML5视频，背景为纯色（例如，蓝色）（图1）。
我想在视频上应用2色.png1440x900图像蒙版（图2），以便最终获得具有透明部分的视频，该部分与图像蒙版的黑色正方形相对应（并且蒙版应按比例缩放）与视频成比例，以便以某种方式做出响应）
尝试解决方案时实际发生的情况（请参见下文），我什么也看不到（最新的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>
该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>
我也愿意评估一种不同的方法来获得相同的效果。
预先谢谢你们
electric_g
如果您将蒙版转换为纯SVG，它将在此演示中运行：http ://jsbin.com/xejiko/1/edit svg位于http://jsbin.com/laday/1/edit
这是mask.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg viewBox="0 0 1440 899" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group" transform="translate(720.000000, 449.000000) scale(1, -1) translate(-720.000000, -449.000000) " fill="#000000">
<path d="M0,830.648889 L0,-0.00222222222 L1440,-0.00222222222 L1440,830.65 L1440,853.1 L1440,898 L810,898 L180,898 L90,897.997778 L45,898 L0,898 L0,830.648889 L0,830.648889 Z M0,830.648889 L0,897.997778 L90,897.997778 L90,853.1 L90,808.2 L135,808.2 L180,808.2 L180,853.1 L180,897.997778 L1440,897.997778 L1440,830.65 L1440,808.2 L810,808.2 L180,808.2 L180,763.3 L180,718.4 L135,718.4 L90,718.4 L90,673.5 L90,628.6 L45,628.6 L0,628.6 L0,763.3 L0,830.648889 L0,830.648889 Z M1080,224.5 L1080,179.6 L1125,179.6 L1170,179.6 L1170,224.5 L1170,269.4 L1125,269.4 L1080,269.4 L1080,224.5 Z M1350,224.5 L1350,179.6 L1305,179.6 L1260,179.6 L1260,134.7 L1260,89.8 L900,89.8 L540,89.8 L540,44.9 L540,0 L990,0 L1440,0 L1440,134.7 L1440,269.4 L1395,269.4 L1350,269.4 L1350,224.5 Z M0,44.9 L0,0 L135,0 L270,0 L270,44.9 L270,89.8 L135,89.8 L0,89.8 L0,44.9 Z" id="Rectangle-1"></path>
</g>
</g>
</svg>在CSS中，您称之为
-webkit-mask-box-image: url(urlto/mask.svg)
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
将Alpha蒙版应用于OpenGL中的视频
- 2
UITextView HTML将响应式CSS应用于图像
- 3
响应式SVG蒙版
- 4
使用imagemagick将垫调整大小的蒙版应用于裁切大小的图像
- 5
如何将蒙版应用于保存图像 (swift3)
- 6
将函数应用于蒙版的numpy数组
- 7
调用熊猫将函数应用于蒙版的结果
- 8
HTML5画布将颜色应用于形状重叠的图像
- 9
如何正确地将“乘法”色调应用于 HTML5 画布中的图像？
- 10
使用numpy将二进制蒙版应用于RGB图像时出现问题
- 11
如何在Java中将灰度图像蒙版应用于RGB图像
- 12
如何在Java中将灰度图像蒙版应用于RGB图像
- 13
将过滤器应用于没有CSS的HTML5视频
- 14
将过滤器应用于没有CSS的HTML5视频
- 15
应用于包含HTML5视频的div时CSS3过渡颠簸吗？
- 16
如何将Alpha蒙版应用于Android可绘制对象？
- 17
将WHERE中的蒙版应用于更高维度的数组
- 18
HTML5 Canvas拖动蒙版，但在Safari W7中将蒙版反转
- 19
响应式布局公司HTML5视频
- 20
如何在不将转换应用于其蒙版的情况下在Snap.svg中转换形状？
- 21
将模糊滤镜应用于SVG图像的特定区域
- 22
将CSS应用于嵌入img标签的SVG图像
- 23
将CSS应用于HTML5自定义元素的正确方法
- 24
HTML5：通过JavaScript绘制后将透明度应用于Canvas
- 25
捕捉SVG。将rect变成图像蒙版并插入图像
- 26
将蒙版应用到 OpenGL 中的视频
- 27
FFmpeg：将效果应用于视频
- 28
将属性应用于视频
- 29
如何将python scikit-learn应用于图像/声音/视频以进行机器学习？
我来说两句