Javascript 以多种方式显示同一视频<；视频>；标签

我有一个视频（我们称之为复合视频），由多个其他视频组成，这些视频使用某种模式连接在一起。例如，请参见下面的视频截图，分别由两个和四个其他视频组成：

但是，我需要以不同的方式显示它：一个较大的主视频和

N-1

视频缩略图，其中

N

是视频的总数。以下是与上述视频相对应的其他显示：

为了显示主视频，我将使用HTML和CSS的组合将我想要的视频定位在较大的div中。无论合成视频中有多少视频，它都能平稳运行

要显示缩略图，我正在使用

绘制所需的零件：

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个）视频中运行良好。但是，随着合成视频中视频数量的增加，缩略图中的视频开始冻结并以不平稳的方式运行。这可能是因为在同一时间进行了太多的图像处理

我认为正确的方法是，不知何故，使用

和特定于视频的方法，而不是图像。我还尝试在多个

标记（每个缩略图一个）中使用相同的

src

，并添加

eventListeners

，以便在播放/暂停主视频后在缩略图中播放/暂停视频。这不是很有效，特别是因为视频有时在搜索/缓冲时会失去同步

是否有一种方法可以在多个

标记中只使用一个视频，并且只使用其中一个（在我的例子中，是包含主视频的一个）来控制所有其他视频？如果没有办法的话，有没有其他方法来解决我的问题

非常感谢

---

p.S.在我的情况下，拥有多个分开的视频是不可取的。处理输入视频并将其划分为多个视频需要很长时间。

您当然可以跨多个视频元素引用同一视频。克隆原始视频并将其附加为缩略视频可能会减轻一些繁琐的工作

迭代缩略图和

.play（）

只要在播放之前将它们的

当前时间设置为主视频的
当前时间，以最小化漂移，就可以了。可能需要等待
canplay
启动主视频和/或缩略图，具体取决于您希望提供的体验

如果每个缩略图都有一个父容器，那么您可能会定位用作缩略图的视频元素，以便只看到您希望看到的视频部分，并剪裁其余部分

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

您需要手动协调所有视频元素的播放/暂停，但对于处理所有“链接”视频元素的播放暂停的facade对象来说，这应该很容易做到。
主视频的格式是什么？它是按需mp4/webm文件吗

如果你仍然想用你的方法来抓取框架并绘制它们，但却面临性能问题，考虑使用网络工作者来完成繁重的工作。你可以在网络工作者那里找到一些视频/画布操作的例子。
我知道我发帖晚了，你可能已经找到了答案。但是，如果有人遇到这个问题，我的回答是：

可以对同一源使用多个视频元素。方法是使用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乘以250px，我会将包装高度和宽度设置为250px，视频的分辨率设置为0px，视频的分辨率设置为250px，视频的分辨率设置为250px，视频的分辨率设置为250px。因此，瓶颈仍然存在于主线程上。但是谢谢！