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

在 Chrome 中对视频应用剪辑

Apply Clipping to Video in Chrome

html

css

google-chrome

html5-video