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

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

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

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

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

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

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

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


javascript html html5-video preload
person bennygubear    schedule 19.03.2012    source источник
comment
Я думаю, что метод 2 является самым близким, который вы можете получить, я попробовал то же самое (с видео HTML5) и испытал небольшой пробел.   -  person Dmitry Pashkevich    schedule 27.06.2012
comment
Спасибо. Это в основном то, что я закончил, но с некоторыми дополнениями.   -  person bennygubear    schedule 03.07.2012

Ответы (5)


arrow_upward
8
arrow_downward

Стоит добавить, что это возможно с 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 стабильный
  • FF 25+ имеет флаг media.mediasource.enabled [MDN]
  • IE 11+ в Windows 8.1 [MSDN< /а>]
person Dmitry Pashkevich    schedule 04.07.2012
comment
Поддержка этого ищет. Стабильный Chrome теперь включает его по умолчанию, FF может сделать это с помощью флага, и даже в IE 11 он есть: developer.mozilla.org/en-US/docs/Web/API/MediaSource - person Hugh Guiney; 10.06.2014

arrow_upward
4
arrow_downward

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

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

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

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

person whadar    schedule 10.06.2012
comment
Используйте $('#mediaplayer').prop('loop', true); за бесшовные и за один клип. но если это более одного переключения видеоклипов, то у Google Chrome пока нет собственного решения. - person ; 22.04.2015

arrow_upward
2
arrow_downward

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

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

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

person Enverex    schedule 05.05.2012

arrow_upward
0
arrow_downward

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

person longi    schedule 20.03.2012

arrow_upward
0
arrow_downward

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

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

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

person bennygubear    schedule 03.07.2012