在多个<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>标签中仅使用一个视频，并且只使用其中一个（在我的情况下，包含主视频的视频）来控制所有其他视频？如果没有办法做到这一点，是否有替代方法解决我的问题？

非常感谢，

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

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到250px，我会将我的包装器height和width设置为250px和我的视频{{1 {}}到top和我的视频0px到left

Answer 2

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

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

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

FWIW，CSS masking可能会让您感兴趣，因为它有助于提高合成性能。

您需要手动协调播放/暂停所有视频元素，但这应该足以容易地处理所有＆＃34;链接＆＃34;的播放暂停的外观对象。视频元素。

Answer 3

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

如果您仍然希望采用抓取框架并绘制它们的方法但面临性能问题，请考虑使用Web工作人员来完成繁重的工作。 Here您可以找到一些与网络工作者进行视频/画布操作的示例。