Как создать секвенсор видео с точностью до кадра с помощью HTML5

Я пытаюсь создать секвенсор видео, способный беспрепятственно последовательно воспроизводить список URL-адресов видео. Между видео не может быть промежутка; воспроизведение должно быть максимально приближенным к покадровому.

Попытка №1 Я использовал довольно очевидный и простой подход, похожий на тот, что упоминался в этой ветке. Список воспроизведения видео или аудио HTML 5

Проблема с этим подходом заключалась в том, что каждый раз, когда одно видео заканчивалось, а последующее видео указывалось в качестве нового источника, это новое видео все еще необходимо было загрузить, что приводило к потенциально долгому промежутку. Если возможно принудительно выполнить предварительную загрузку всех видео еще до того, как они будут названы в video.src, этот подход все равно потенциально может работать.

Попытка №2 Я переписал сценарий так, чтобы каждое видео в списке приводило к созданию отдельного видеоэлемента, но не прикрепленного к документу (с помощью createElement). Затем, когда каждое видео заканчивалось, я удалил предыдущий узел и добавил следующий элемент.

Код, выполняемый при загрузке страницы:

for (i in timelinePlay)
    if (timelinePlay[i] != null)        
    {
        var element = document.createElement('video');
        element.id = 'video1-' + (i);
        element.src = timelinePlay[i]['URL'];
        element.preload = 'load';
        video1Array[i] = element;
    }

Код для события «завершено» видео:

videoElement.addEventListener("ended", function (event) {
    if (this.currentTime > 0)
    {
        if (player.hasChildNodes())
            while (player.childNodes.length > 0)
                player.removeChild(player.firstChild);

        player = document.getElementById('canvas-player');
        player.appendChild(video1Array[timelineCurrent]);

        nextVideo = document.getElementById('video1-' + timelineCurrent);

        nextVideo.play();

        timelineCurrent++;
    }
}, false);

(Обратите внимание, что эти примеры кода являются частичными и отчасти Кроме того, я понимаю, что использование мной объектов в качестве ассоциативных массивов - не лучшая практика)

Результат этой модификации был НАМНОГО ближе, потому что видео уже загружались к тому времени, когда их требовалось воспроизвести, но было по-прежнему короткий и непоследовательный разрыв между видео.

Попытка №3 Я заменил прослушиватель событий "завершился" на прослушиватель "timeupdate", начиная со следующего:

nextVideo.addEventListener("timeupdate", function (event)
{
    if (this.currentTime > (this.duration - 0.1)  && this.currentTime > 1)
    {
        this.removeEventListener("timeupdate", function () { return; }, false);

('this.currentTime> 1' просто для того, чтобы гарантировать, что предыдущее видео действительно воспроизводится)

Я надеялся, что разрыв между видео было достаточно близко, чтобы быть последовательным, чтобы запуск следующего видео за 0,1 секунды до окончания предыдущего видео мог исправить разрыв в приемлемой степени. В результате время действительно было лучше, но видео пропускалось. Я приписываю пропущенные видео пропускам события timeupdate, но могу ошибаться.

Другие альтернативные варианты, которые я также рассмотрел: Скрипт SMIL (кажется устаревшим и, вероятно, в любом случае будет иметь те же проблемы с синхронизацией) ffmpeg на бэкэнде для объединения видео (мой хост не разрешает сценарии оболочки)

К вашему сведению, я сейчас разрабатываю для Safari 5.0.3