css - 在 Chrome 中将剪辑应用于视频

Question

我需要并排播放同一个视频两次。左边的视频应该显示视频的右半部分，反之亦然。所以它看起来像这样:

以下 HTML 在 Firefox 中有效，但在 Chrome 中无效(它只是忽略了裁剪)。我不想将帧复制到 Canvas，因为那样速度不够快。有什么方法可以诱使 Chrome 剪辑视频标签吗？

代码:

 #video1 {
   position: absolute;
   clip: rect(0px, 1000px, 1000px, 150px);
   left: 0px;
 }
 #video2 {
   position: absolute;
   clip: rect(0px, 150px, 1000px, 0px);
   left: 300px;
 }

<video id="video1" width="300px" controls loop autoplay>
  <source src="http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_50mb.mp4" type="video/mp4" />
</video>
<video id="video2" width="300px" controls loop autoplay mute>
  <source src="http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_50mb.mp4" type="video/mp4" />
</video>

Answer 1

CSS clip 是 deprecated并已从网络标准中删除。

This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.

您可以改用clip-path - 它必须在 Chrome/Opera 中加上前缀:

#wrapper {
  position: relative;
  width: 300px;
  height: 240px;
  overflow: hidden;
}
#video1 {
  position: absolute;
  -webkit-clip-path: inset(0 0 0 150px);
  clip-path: inset(0 0 0 150px);
  left: -150px;
}
#video2 {
  position: absolute;
  -webkit-clip-path: inset(0 150px 0 0);
  clip-path: inset(0 150px 0 0);
  left: 150px;
}

<div id=wrapper>
  <video id="video1" width="300px" muted controls loop autoplay>
    <source src="https://www.sample-videos.com/video123/mp4/240/big_buck_bunny_240p_50mb.mp4" type="video/mp4" />
  </video>
  <video id="video2" width="300px" muted controls loop autoplay mute>
    <source src="https://www.sample-videos.com/video123/mp4/240/big_buck_bunny_240p_50mb.mp4" type="video/mp4" />
  </video>
</div>

尽管这在 Firefox 中似乎无法正常工作，因此您可能必须将旧的和新的结合起来才能工作(或者将视频元素包装在容器 div 中，然后使用 overflow:hidden 对其进行剪辑)。

###替代 Canvas 解决方案

另一种方法是使用 Canvas (它足够快..)，它还允许您精确地同步两半帧(使用两个视频源无法做到这一点)以及仅使用单个流两个(在本例中):

var ctx = c.getContext("2d"),
    video = document.createElement("video");

video.oncanplay = draw;
video.loop = video.autoplay = video.muted = true;
video.src = "https://www.sample-videos.com/video123/mp4/240/big_buck_bunny_240p_50mb.mp4";

ctx.fillText("Loading video...", 20, 20);

function draw() {
  var vw = video.videoWidth>>1;                              // half width
  var vh = video.videoHeight;
  ctx.drawImage(video, 0, 0, vw, vh, 150, 0, 150, c.height); // draw left half to the right
  ctx.drawImage(video, vw, 0, vw, vh, 0, 0, 150, c.height);  // draw right half to the left
  requestAnimationFrame(draw);
}

<canvas id=c width=300 height=220></canvas>