在多个<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
}

它适用于3个(有时是4个)视频.但是,随着复合视频中视频数量的增加,缩略图中的视频开始冻结并且运行不顺畅.这可能是因为同时进行了太多的图像处理.

我认为正确的方法是使用<video>和视频专用的方法,而不是图像.我还尝试src在多个<video>标签中使用相同的标签(每个缩略图一个),并eventListeners在播放/暂停主视频后添加播放/暂停缩略图中的视频.这不是很有效,特别是因为在搜索/缓冲时,视频有时会失去同步.

有没有办法在多个<video>标签中只使用一个视频,并且只使用其中一个(在我的情况下,包含主视频的视频)来控制所有其他标签？如果无法做到这一点,是否有替代方法解决我的问题？

非常感谢,

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

Answer 1

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

.play()只要currentTime在播放之前将缩略图设置为与主视频相同，就可以迭代缩略图并处理它们，以最大程度地减少漂移。可能需要等待canplay主视频和/或缩略图的播放，具体取决于您想要提供的具体体验。

如果每个缩略图都有一个父容器，您可以将视频元素定位为缩略图，这样只有您想要查看的视频部分可见，而剪辑其余部分。

FWIW，如果CSS 屏蔽有助于提高合成性能，那么您可能会对它作为性能优化感兴趣。

您将需要手动协调所有视频元素的播放/暂停，但这对于处理所有“链接”视频元素的播放暂停的外观对象来说应该很容易做到。