套用响应SVG图像掩码的HTML5视频

我在发布前已经做了一天的搜索，但没有运气套用响应SVG图像掩码的HTML5视频

我的问题：
我有一个包装一个HTML5视频与固体颜色（例如蓝色）背景（图1）。
我想在视频上应用双色.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>

我也开来评估不同的方法来获得相同的效果。

预先感谢您家伙

来源

2014-09-24 fcalderan

你提到不使用的图像，但这一确实的HTML5多媒体书例如：http://www.html5multimedia.com/code/ch10 /svg-video-mask-external-source.html – 2014-09-24 14:04:04

如果转换你的面具在纯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)

来源

2014-09-24 11:39:44

这适用于webkit，并且我使用'imagemagick + potrace“用于从”png“转换为”svg“。现在我试图让它在Firefox上也能正常工作 – fcalderan 2014-09-24 13:36:11

它不适用于微软浏览器（IE，Edge） – 2015-09-21 09:05:32

不确定SVG但在帆布很容易。所有你需要做的就是将视频复制到画布上，并完成源代码 - 在http://codepo8.github.io/canvas-masking/

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

来源

2014-09-24 10:38:48 user30934

谢谢，但这个库只适用于图片。为了使它即使在视频中也能正常工作，我应该将每个视频帧复制到画布上并应用蒙版，尤其是在移动设备上，并且对于长视频，我认为它并不是真正的高性能：（ – fcalderan 2014-09-24 10:44:52

套用响应SVG图像掩码的HTML5视频

回答

相关问题