使用文本屏蔽视频

Question

是否可以使用 HTML/CSS 文本来屏蔽视频？我已经找到并设置了这样的工作方式，但没有一个允许文本后面的透明背景。

例如，这支笔需要您进行某种填充，它并没有真正掩盖实际视频，而是创造幻觉。

https://codepen.io/dudleystorey/pen/QvvEYQ

如果你改变了

body {
  background: white;
  margin: 2rem;
}

到

body {
  background: black;
  margin: 2rem;
}

您会看到它只是一个带有遮罩的白色填充，而不是视频。 也许这只有在画布中才有可能？

Answer 1

是的，你可以很容易地用画布实现它，使用 compositing 和渲染循环：

var vid = document.createElement('video');
vid.onerror = function() {
  vid.onerror = null;
  vid.src = "http://thenewcode.com/assets/videos/ocean-small.mp4";
};
vid.src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ocean-small.webm"
vid.muted = true;
vid.onloadedmetadata = initCanvas;
vid.loop = true;
vid.play();

function initCanvas() {
  var canvas = document.createElement('canvas');
  var vWidth = vid.videoWidth;
  var vHeight = vid.videoHeight;
  var ctx = canvas.getContext('2d');
  // we need to handle the resizing of our canvas ourselves...
  window.onresize = function() {
    canvas.width = window.innerWidth;
    canvas.height = (vHeight / vWidth) * canvas.width;
    var fontSize = (vWidth / 2 * (window.innerWidth / vWidth)) * 0.35;
    ctx.font = '700 ' + fontSize + 'px Impact,sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
  };
  onresize();
  
  document.body.appendChild(canvas);
  draw();
  
  function draw() {
    // first draw our video frame
    ctx.drawImage(vid, 0,0, canvas.width, canvas.height);
    // set the composite mode
    ctx.globalCompositeOperation = 'destination-in';
    // will remove every pixels that are not where new pixels will come
    ctx.fillText('OCEAN', canvas.width / 2, canvas.height / 2);
    // reset the normal compositing mode
    ctx.globalCompositeOperation = 'source-over';
    // do it again at next screen refresh
    requestAnimationFrame(draw);
  }
}

body {
  background: linear-gradient(45deg, white 0%, blue 100%) no-repeat;
}

但这可能不是性能和可扩展性方面的最佳解决方案。

您应该能够在您的 <video> 元素上应用与您相同的 svg <mask>（进行了一些修改），但似乎 HTML 内容上的 SVG 掩码仍未得到广泛支持（Firefox 接受它，Chrome 不支持'不...）。

body {
  background: linear-gradient(45deg, white 0%, blue 100%);
}
svg{
  font-family: impact, sans-serif;
}
video {
  -webkit-mask: url(#mask);
  mask: url(#mask);
  width: 100%;
  position: absolute;
  z-index: 1;
}

<svg width="0" height="0" style="position:absolute;z-index:-1">
  <defs>
    <mask id="mask" x="0" y="0" maskContentUnits="objectBoundingBox" maskUnits="objectBoundingBox" width="100%" height="100%">
      <text fill="white" x="0.5" y="0.5" style="font-weight:700" font-size="0.22" text-anchor="middle" alignment-baseline="middle">OCEAN</text>
    </mask>
  </defs>
</svg>
<video autoplay playsinline muted loop preload poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/oceanshot.jpg">
  <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ocean-small.webm" />
  <source src="http://thenewcode.com/assets/videos/ocean-small.mp4" />
</video>

因此，更好的解决方案可能是使用 SVG <clipPath>，它似乎比 CSS mask 具有更好的浏览器支持。

body {
  background: linear-gradient(45deg, white 0%, blue 100%);
}
svg{
  font-family: impact, sans-serif;
}
video {
  -webkit-clip-path: url(#clip);
  clip-path: url(#clip);
  width: 100%;
  position: absolute;
  z-index: 1;
}

<svg style="opacity:0;position:fixed;z-index:-999" viewBox="0 0 1 1">
  <defs>
    <clipPath id="clip" clipPathUnits="objectBoundingBox">
      <text x="0.5" y="0.5" font-size="0.22" text-anchor="middle" alignment-baseline="middle">OCEAN</text>
    </clipPath>
  </defs>
</svg>
<video autoplay playsinline muted loop preload poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/oceanshot.jpg">
  <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ocean-small.webm" />
  <source src="http://thenewcode.com/assets/videos/ocean-small.mp4" />
</video>

请注意，我也不真正了解浏览器对 css clipPath 的支持，因此对于某些浏览器，您可能不得不回退到画布。