HTML 5 Video, Streaming/Buffering - только определенная часть более длинного видео

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

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

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

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

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

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

Ответ 1

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

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

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

Ответ 2

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

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

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

Ответ 3

Вы можете установить время, используя javascript (свойство video 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;
}