У меня есть видео (пусть его называют композитным видео), состоящим из нескольких других видео, объединенных с помощью какого-то шаблона. Например, см. Скриншот видео ниже, составленный двумя и четырьмя другими видео соответственно:
Однако мне нужно отобразить его по-разному: одно главное, большее, видео и 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. Наличие нескольких разделенных видео не является вариантом в моей ситуации. Это займет очень много времени, чтобы обработать входное видео и разделить его на несколько видеороликов.