javascript - 在多个 标签中显示相同的视频

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
}

它适用于 3 个(有时是 4 个)视频。但是，随着合成视频中视频数量的增加，缩略图中的视频开始卡顿，运行不流畅。发生这种情况的原因可能是同时进行了太多图像处理。

我认为正确的方法是以某种方式使用 <video>和特定于视频而非图像的方法。我也尝试使用相同的 src在多个<video>标签(每个缩略图一个)并添加 eventListeners播放/暂停主视频后播放/暂停缩略图中的视频。这不是很有效，特别是因为在搜索/缓冲时视频有时会不同步。

有没有办法在多个视频中只使用一个视频 <video>标签并仅使用其中一个(在我的例子中，包含主视频的标签)来控制所有其他标签？如果没有办法做到这一点，是否有其他方法可以解决我的问题？

非常感谢，

P.S. 在我的情况下，不能选择多个分开的视频。处理输入视频并将其分成多个视频需要很长时间。

Answer 1

您当然可以在多个视频元素中引用同一视频。克隆原始文件并将它们附加为缩略图视频可能会减轻一些乏味。

迭代缩略图并 .play() 应该没问题，只要您在播放前将它们的 currentTime 设置为主视频的时间，以最小化漂移。可能需要等待 canplay 触发主视频和/或缩略图，具体取决于您希望提供的确切体验。

如果每个缩略图都有一个父容器，您可以定位用作缩略图的视频元素，这样只有您希望看到的视频部分可见，而剪掉其余部分。

FWIW，CSS masking如果它有助于提高合成性能，您可能会对性能优化感兴趣。

您将需要手动协调所有视频元素的播放/暂停，但这应该很容易，只需使用处理所有“链接”视频元素播放暂停的外观对象即可。