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

我有一个视频（让我们称之为复合视频）由多个其他视频连接使用某种模式组成。例如，请参见下面的视频的屏幕截图，由通过两个和四个其它影片，分别为：显示多个相同的视频<video>标签

然而，我需要不同地显示它：一个主要的，更大，视频和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>和方法特定的视频，而不是图像。我还尝试在多个<video>标记中使用相同的src标记（每个缩略图一个标记），并添加eventListeners以在主视频播放/暂停后播放/暂停缩略图中的视频。这不是非常有效，特别是因为在寻找/缓冲时，视频有时会失去同步。

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

非常感谢，

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

来源

2016-01-29 Amaury Medeiros

您当然可以在多个视频元素中引用相同的视频。克隆原始文件并将它们添加为缩略图视频可能会缓解一些枯燥乏味的内容。

遍历缩略图和.play()荷兰国际集团作为你之前播放设置其currentTime与主视频的，以尽量减少漂移它们应该被罚款这么久。根据您要传送的确切体验，可能需要等待canplay才能触发主视频和/或缩略图。

如果每个缩略图都有一个父容器，您可以将视频元素定位为缩略图，这样只有您关心看到的视频部分可见，剩下的部分会被裁剪掉。

如果FWIW，CSS masking有助于合成性能，可能会将其作为性能优化的一部分。

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

来源

2016-01-29 21:25:43 mczepiel

主视频的格式是什么？这是一个随需应变的mp4/webm文件吗？

如果您仍然想要采用抓取框架并对其进行绘制但面临性能问题的方法，请考虑使用网络工作人员处理繁重的工作。 Here你可以找到一些web工作者的视频/画布操作的例子。

来源

2016-01-29 21:45:57 flavioribeiro

Web工作人员受到限制，因为我无法在其任务上操作DOM。因此，主线仍然存在瓶颈。但是，谢谢！ –

我知道我发布的很晚，而且您可能已经找到了答案。但是，如果有其他人遇到此问题，这里是我的答案：

您可以使用具有相同来源的多个视频元素。做到这一点的方式是与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>

所以，如果我是做右上方的视频，并通过250像素每一个为250像素，我会成立我的包装height和width到250px和我视频top到0px和我的视频left到250px

来源

2016-07-10 04:13:28 jlynch630

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

回答

相关问题