在多个<video>标签中显示相同的视频

Question

我有一个视频（称之为混合视频），由多个其他视频按某种模式串联而成。例如，下面的截图展示了由两个和四个其他视频组成的视频：

然而，我需要以不同的方式显示它：一个主大视频和N-1个视频缩略图，其中N是视频的总数。以下是与上述视频对应的另一种显示：

为了显示主要内容，我使用HTML和CSS的组合来定位我想要的视频在更大的div中。无论混合视频中包含的视频数量有多少，它都可以平稳运行。

为了显示缩略图，我使用<canvas>来绘制我想要的部分：

video.addEventListener('play', function() {
  (function loop() {
    drawThumbnails();
    setTimeout(loop, 1000 / 30); // drawing at 30fps
  })();
}, false);

function drawThumbnails() {
  for (var i = thumbs.length - 1; i >= 0; i--) {
    drawThumbnail(thumbs[i]);
  };
}

function drawThumbnail(thumb) {
  var thumbNumber = Number(thumb.id.match(/\d+/g));
  var canvasContext = thumb.getContext('2d');
  var thumbCoordinates = getVideoCoordinates(thumbNumber);
  var srcX = thumbCoordinates.column * videoWidth;
  var srcY = thumbCoordinates.row * videoHeight;

  canvasContext.drawImage(
      video, srcX, srcY, videoWidth, videoHeight, // Source
      0, 0, thumb.width, thumb.height); // Destination
}

在三个（有时是四个）视频的情况下，它运行良好。但是，随着合成视频中视频数量的增加，缩略图中的视频开始冻结和不流畅运行。这可能是因为同时进行了太多的图像处理。

我认为正确的方法是以某种方式使用<video>和专用于视频而不是图像的方法。我还尝试过在多个<video>标记中使用相同的src（每个缩略图一个），并添加eventListeners以播放/暂停缩略图中的视频，一旦主视频播放/暂停。那不是很有效率，特别是当寻求/缓冲时，视频有时会失去同步。

有没有一种方法可以在多个<video>标记中仅使用一个视频，并仅使用其中一个（在我的情况下，包含主视频的视频）来控制所有其他视频？如果无法实现这种方式，是否有另一种解决我问题的方法？

非常感谢，

P.S.在我的情况下，拥有多个分离的视频不是一个选项。处理输入视频并将其分成多个视频需要很长时间。

- Amaury Medeiros

Answer 1

我知道我发帖晚了，你可能已经找到了答案。但是，如果其他人遇到这个问题，这是我的答案：您可以使用具有相同源的多个视频元素。做法是使用css。

.wrapper {
    height: /*height of one video*/;
    width: /*width of one video*/;
    overflow: hidden;
}
video {
    position: relative;
    top: /*height offset*/;
    left: /*width offset*/;
}

而且HTML

<div class="wrapper">
    <video src="myvideo.mp4"></video>
</div>

因此，如果我正在制作右上角的视频，并且每个视频都是250px x 250px，我将设置我的包装器 height 和 width 为 250px，我的视频 top 为 0px，我的视频 left 为 250px

- jlynch630

Answer 2

您可以在多个视频元素之间引用同一个视频。克隆原始视频并将它们附加为缩略视频可能会减轻一些繁琐的工作。

遍历缩略图并使用.play()播放它们应该没问题，只要在播放前设置它们的currentTime与主视频相同，以最小化漂移。根据您想要提供的确切体验，可能需要等待主视频和/或缩略图上的canplay事件触发。

如果每个缩略图都有一个父容器，您可能可以定位作为缩略图的视频元素，以便仅可见您关心的视频部分，并剪切其余部分。

顺便说一下，如果CSS masking能够提高合成性能，那么这可能会对您有所帮助。

您需要手动协调所有视频元素的播放/暂停，但使用一个门面对象来处理所有“链接”视频元素的播放暂停应该很容易。

- mczepiel

Answer 3

主视频的格式是什么？它是按需的mp4/webm文件吗？

如果您仍然想采用抓取帧并绘制它们的方法，但遇到了性能问题，请考虑使用Web Workers来处理繁重的工作。在这里，您可以找到一些使用Web Workers进行视频/画布操作的示例。

- flavioribeiro

---

Web workers的局限在于我无法在它们的任务中操作DOM。因此瓶颈仍然在主线程上。但还是谢谢！ - Amaury Medeiros