Безрадостный переход от видео к видео с помощью html5

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

Я пробовал два метода, используя только html5 (я бы предпочел не использовать flash, хотя в конечном итоге у меня будет резерв), который не работал без проблем, хотя в зависимости от браузера и оборудования он может приблизиться.

Основные методы:

Способ 1: предварительная загрузка всех видео и изменение пути видео src при каждом нажатии с помощью javascript

Метод 2: снова предварительно загрузите видео и используйте несколько тегов и меняйте их с помощью javascript при каждом нажатии.

Есть ли способ заставить любой из этих двух методов работать без пробелов? Должен ли я использовать небольшой трюк, например, одновременно воспроизводить оба видео за секунду, прежде чем показывать второй и останавливать первый? Можно ли это сделать не с игроками html5? Это можно сделать со вспышкой?

Я видел этот тип вопроса пару раз с видео и аудио без четкого решения, но им было пару месяцев, и я надеялся, что теперь есть решение. Спасибо за помощь.

Ответ 1

Стоит добавить, что это возможно с помощью API MediaSource, предложенного Google. Этот API позволяет передавать произвольные двоичные данные одному элементу видео, поэтому, если ваше видео разбито на куски, вы можете получить эти фрагменты с помощью XHR и добавить их в свой элемент видео, они будут воспроизводиться без пробелов.

В настоящее время он реализован только в Chrome, и вам нужно включить Enable Media Source API on <video> elements в хром: флаги, чтобы использовать его. Кроме того, в настоящий момент поддерживается только контейнер WebM.

Вот статья о HTML5Rocks, которая демонстрирует, как работает API: "Потоковое" видео с использованием MediaSource API.

Еще одна полезная статья, в которой говорится о фрагментированном плейлисте: Сегментирование WebM-видео и API MediaSource.

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

UPDATE JUN 2014 Поддержка браузера постепенно улучшается: (спасибо @Hugh Guiney за подсказку)

Chrome Stable
FF 25+ имеет флаг media.mediasource.enabled [MDN]
IE 11+ в Windows 8.1 [MSDN]

Ответ 2

Вы нашли лучший способ сделать это?

Я реализовал двухбуферное воспроизведение с использованием двух видеотегов. Один используется для текущего воспроизведения, а второй для предварительной загрузки следующего видео. Когда видео заканчивается, я "обмениваю" теги:

function visualSwap() {
    video.volume = video2.volume;
    video2.volume = 0;
    video.style.width = '300px';
    video2.style.width = '0px';
}

У него есть некоторое недетерминированное поведение, поэтому я не на 100% доволен, но стоит попробовать...

Ответ 3

Изменение тега SRC выполняется быстро, но не безразлично. Я пытаюсь найти лучший способ для медиаплеера, который я создаю и предварительно загружаю следующий трек, и переключение src через "закончился" оставляет пробел в 10-20 мс, что может показаться крошечным, но этого достаточно, чтобы быть заметным, особенно с музыкой.

Я только что проверил, используя второй звуковой элемент, который срабатывает, как только первый аудио-элемент заканчивается через событие "закончился", и это повлекло за собой тот же крошечный разрыв.

Похоже, что без использования сложных хаков нет простого (ish) способа достижения бесщеточного воспроизведения, по крайней мере, прямо сейчас.

Ответ 4

можно. вы можете проверить это: http://evelyn-interactive.searchingforabby.com/ все это сделано в html5. они предварительно загружают все видеоролики в начале и запускают их в одно и то же время. еще не успел проверить, как они это делают, но, возможно, это поможет, если вы проверите их скрипты с помощью firebug

Ответ 5

После многих попыток я действительно использовал что-то похожее на метод 2. Я нашел этот сайт http://switchcam.com и в основном скопировал их подход. Я предварительно буферизуюсь по мере приближения времени начала видео, а затем автоматически воспроизводится в качестве точки начала видео. У меня были текущие видео, которые воспроизводятся одновременно (в небольшом div - как бонус UI), и пользователи могут переключаться между видео, переключающими "главный экран". Поскольку все видео воспроизводились сразу, вы можете выбрать аудио, и этот пробел не стал проблемой.

К сожалению, я никогда не решал свою проблему точно, и я не уверен, что мое решение имеет лучшую производительность, но оно работает нормально с быстрым подключением.

Спасибо за помощь всем!