Question

我在发布之前已经进行了为期一天的搜索，但没有运气

我的问题：
我在包装中使用纯色（例如蓝色）背景（图1）的HTML5视频。
我想在视频上应用双色.png 1440x900图像蒙版（图2），以便最终获得带有一些透明部分的视频，对应于图像蒙版的黑色方块（并且蒙版应与视频成比例缩放，以便以某种方式响应）

enter image description here

实际发生的事情
通过尝试的解决方案（见下文），我什么都看不见（最新的Chrome和Firefox）：页面完全是蓝色，视频开始

我尝试了什么
我尝试了一些发现here和here的演示，但在两个示例中，应用的蒙版都不是用图像制作的。这是我尝试的基本代码。

<!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>

我也愿意评估一种不同的方法来获得相同的效果。

先谢谢你们

Answer 1

如果您在纯SVG中转换蒙版，它将在此演示http://jsbin.com/xejiko/1/edit中运行 svg位于http://jsbin.com/laday/1/edit

这是 mask.svg

＆＃13;

<?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>

＆＃13;

在css中你称之为

-webkit-mask-box-image: url(urlto/mask.svg)

Answer 2

不确定SVG，但在CANVAS中这很容易。您需要做的就是将视频复制到画布并执行source-atop http://codepo8.github.io/canvas-masking/

当然，您遇到的问题是您无法访问不在同一域中的视频：/

将响应式SVG图像蒙版应用于HTML5视频

2 个答案: