我有一个视频(让我们称之为复合视频)由多个其他视频组合使用一些模式连接.例如,请参阅以下视频的屏幕截图,分别由两个和另外四个视频组成：
但是,我需要不同的显示方式：一个主要,较大的视频和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,thumb.width,thumb.height); // Destination
}
它对3(有时4)的视频工作良好.然而,随着复合视频中的视频数量的增加,缩略图中的视频开始冻结并且不能以平滑的方式运行.这可能是因为在同一时间完成了太多的图像处理.
我认为这样做的正确方法是以某种方式使用< video>和视频专用的方法,而不是图像.我也试图在多个< video>中使用相同的src标签(每个缩略图一个),并在播放/暂停主视频后添加事件监听器播放/暂停缩略图中的视频.这不是非常有效率,特别是因为视频在寻找/缓冲时有时会失去同步.
是否有一种在多个< video>中仅使用一个视频的方法标签并且只使用其中的一个(在我的情况下,包含主视频的那个)来控制所有其他的？如果没有办法做到这一点,是否有替代方法来解决我的问题？
非常感谢,
附：在我的情况下,有多个分开的视频不是一个选择.处理输入视频需要很长时间,并将其分割成多个视频.
解决方法
我知道我发迟了,你可能已经找到答案了.但是,如果有人遇到这个问题,这里是我的答案：
您可以使用具有相同来源的多个视频元素.这样做的方法是用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像素,我将我的包装高度和宽度设置为250像素,我的视频顶部为0像素,我的视频保留为250像素
