Я пытаюсь создать видеопоследователь, способный воспроизводить список 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
Я заменил прослушиватель события «конец» на прослушиватель «время обновления», начиная со следующего:
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 в бэкэнде для объединения видео (мой хост не разрешает сценарии оболочки)
FYI Я сейчас разрабатываю для Safari 5.0.3