HTML 5 видео, потоковое видео / буферизация только определенной части более длинного видео

Question

У нас есть длинный фрагмент видео, до 1 часа. Мы хотим показать пользователям небольшие 30-секундные фрагменты этого видео. Обязательно, чтобы видео не заикалось ни в какой момент.

Пользователь не может , а затем переходить к остальной части видео, он видит только 30-секундный фрагмент.

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

Возможно ли это с HTML5 Video? Будет ли это как-то связано с TimeRanges? Видео должно быть передано по чистому потоковому протоколу? Можем ли мы буферизовать весь 30-секундный блок перед его воспроизведением?

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

Ваши мысли и пожелания приветствуются, спасибо!

Answer 1

Вы можете установить время, используя javascript (свойство currentTime видео).

Если вам нужна пользовательская панель поиска, вы можете сделать что-то вроде этого:

<input type="range" step="any" id="seekbar">

var seekbar = document.getElementById('seekbar');
function setupSeekbar() {
seekbar.max = video.duration;
}
video.ondurationchange = setupSeekbar;
function seekVideo() {
  video.currentTime = seekbar.value;
}
function updateUI() {
  seekbar.value = video.currentTime;
}
seekbar.onchange = seekVideo;
video.ontimeupdate = updateUI;

function setupSeekbar() {
  seekbar.min = video.startTime;
  seekbar.max = video.startTime + video.duration;
}

Если видео идет в потоковом режиме, вам необходимо «рассчитать» время «окончания».

var lastBuffered = video.buffered.end(video.buffered.length-1);
function updateUI() {
  var lastBuffered = video.buffered.end(video.buffered.length-1);
  seekbar.min = video.startTime;
  seekbar.max = lastBuffered;
  seekbar.value = video.currentTime;
}

Answer 2

На данный момент HTML5-видео - это настоящая PITA - у нас нет реального API для управления буферизацией браузера, поэтому они имеют тенденцию заикаться при более медленных соединениях, так как браузеры пытаются интеллектуально буферизовать, но обычно делают совсем наоборот.

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

В этом случае вам действительно нужен приличный Flash Player и медиа-сервер в бэкэнде - это когда у вас полный контроль.

Answer 3

Вы можете сделать кое-что из этого, но тогда вы будете подвержены собственной буферизации браузера. (Вы также не можете остановить его от буферизации после X секунд) Лучше всего, вы могли бы легко иметь пользовательский элемент управления поиском, чтобы ограничить диапазоны и остановить видео при достижении 30-секундного блока.

Кроме того, буферизация - это не то, что вы можете контролировать, кроме как сказать браузеру не делать этого. Все остальное происходит автоматически, и поддержка принудительного заполнения полного буфера была удалена из спецификации.

В любом случае, просто дать вам знать, что это ужасная практика, и это может быть сделано, но вы можете столкнуться со многими проблемами. Вы всегда можете использовать такой сервис, как Zencoder, чтобы помочь справиться и с транскодированием. Другой альтернативой может быть наличие на сервере ffmpeg или другого программного обеспечения для обработки отсечения и транскодирования.