Безрезультатный переход с видео на видео с использованием html5

Question

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

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

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

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

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

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

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

Answer 1

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

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

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

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

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

ОБНОВЛЕНИЕ ИЮНЬ 2014 Поддержка браузера постепенно улучшается: (спасибо @Hugh Guiney за подсказку)

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

Answer 2

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

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

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

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

Answer 3

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

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

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

Answer 4

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

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

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

Answer 5

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