Question

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

例如，这支笔需要你进行某种填充，它不是真正掩盖了实际的视频，而是创造了幻觉。

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

如果你改变了

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

要

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

您会看到它只是填充时带有遮罩的白色填充，而不是视频。也许这只能在画布上实现？

Answer 1

是的，您可以使用compositing和渲染循环轻松地使用画布实现它：

＆＃13;

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);
  }
}

＆＃13;

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

＆＃13;

但就性能和可扩展性而言，这可能不是最好的解决方案。

您应该可以在<mask>元素上应用相同的svg <video>（经过一些修改），但似乎仍然没有广泛支持HTML内容上的SVG掩码（Firefox接受它，Chrome没有......）。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

使用文本屏蔽视频

1 个答案: