Синхронизация нескольких видео HTML5

Question

Я надеюсь, что будут воспроизводиться 3 видео в синхронизации, только одно видимое одновременно с возможностью переключения между ними. Все должны быть синхронизированы друг с другом и звуковой дорожкой (которая может быть просто звуковой дорожкой одного из видеофайлов, если это проще).

Я только прочитал очень пессимистичные вещи о том, что поддерживать постоянную и синхронизированную частоту кадров для многочисленных медиафайлов практически невозможно. FPS, предположительно, немного сдвигается и неуправляем.(?)

Так как мне нужен только один видимый за раз, я надеюсь, что это будет в мою пользу, но мне интересно, есть ли какие-либо готовые процедуры для чего-то такого, на что любой может указать мне. Не ищу никого, кто бы написал для меня код, просто любопытно, вводило ли меня в заблуждение мое исследование.

✌ & ♡

Answer 1

К сожалению, в браузере нет механизма синхронизации (то есть тайм-код / ​​SMTPE или аналогичный sinc), который бы позволял совершенную синхронизацию с различными источниками видео.

форсирование currentTime обновления могут иметь неприятные последствия из-за задержки.

Для правильной синхронизации видео частей все видео должны быть из одного источника видео (в данном случае это файл). Видео может быть предварительно отредактировано, так что все части, которые вы хотите показать, редактируются вместе, разделяя поверхность видеоизображения.

Затем просто используйте canvas (или вырезайте с помощью CSS), чтобы показать разные части видео в разных элементах на странице.

Обновление: демонстрационные демонстрационные версии удалены, извините. Содержание ответа остается в силе, хотя.

Используйте элемент canvas для рисования в "текущей" части, используя drawImage() функциональность отсечения. Существует известная проблема в OSX с использованием видео в качестве источника изображения для drawImage(); Вы можете предварительно загрузить последовательность изображений для этих случаев.

Вы можете настроить карту для каждой части - в этом примере я буду использовать HD720 в качестве общего размера:

var map = [
        {x: 0, y:0},
        {x: 640, y:0},
        {x: 0, y:360}
    ];

Теперь вы можете использовать кнопки / селектор / радио, чтобы изменить индекс видео для показа. Ширина и высота известны:

<canvas width=640 height=360></canvas>

И в JavaScript:

var pos = map[index]; // source rect:         Dest rect:
ctx.drawImage(video, pos.x, pos.y, 640, 360,  0, 0, 640, 360);

Все, что вам нужно сделать сейчас, это поместить чертеж в цикл:

function render() {
    var pos = map[index];
    ctx.drawImage(video, pos.x, pos.y, 640, 360, 0, 0, 640, 360);
    requestAnimationFrame(render)
}

Если вы хотите отобразить все видео на экране одновременно, но в разных местах, вы можете вместо этого просто трижды вызвать drawImage(), используя одну и ту же карту, но с разными холстами:

<div>
    <canvas width="640" height="360"></canvas>
</div>

<div style="margin-left:400px">
    <canvas width="640" height="360"></canvas>
</div>

<div>
    <canvas width="640" height="360"></canvas>
</div>

И в JavaScript:

function render() {
    for(var i = 0, pos; i < ctx.length; i++) {
        pos = map[i];
        ctx[i].drawImage(video, pos.x, pos.y, 640, 360, 0, 0, 640, 360);
    }
    requestAnimationFrame(render)
}

Совет: холст может быть другого размера, чем видео. Просто обновите последние ширину и высоту (dest. Rect), чтобы заполнить холст.

Совет 2: вы можете использовать эту технику, также накладывать текст или логотипы и т. Д.