将剪辑应用于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，已从网络标准中删除。

  

此功能已从Web标准中删除。一些   浏览器可能仍然支持它，它正在被删除。   不要在旧项目或新项目中使用它。使用它的页面或Web应用程序可能   随时休息。

您可以改为使用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="http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_50mb.mp4" type="video/mp4" />
  </video>
  <video id="video2" width="300px" muted controls loop autoplay mute>
    <source src="http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_50mb.mp4" type="video/mp4" />
  </video>
</div>

虽然看起来这在Firefox中无法正常工作，但您可能必须将旧版本与新版本相结合才能使用（或将视频元素包装在容器div中，然后使用overflow:hidden剪切）

替代画布解决方案

另一种方法可以是使用画布（足够快......），它也可以让你精确地同步两半（使用两个视频源无法做到）以及仅使用一个流来代替两个（在这种情况下）：

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

video.oncanplay = draw;
video.loop = video.autoplay = video.muted = true;
video.src = "http://www.sample-videos.com/video/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>