Экспериментирую с Media Source Extension, основу взял из https://developers.google.com/web/updates/2016/03/mse-sourcebuffer
- Загружаю видеоролик через XMLHttpRequest
- Разбиваю его на 20 кусочков через Blob & FileReader (1 кусок примерно 3 сек.)
- Создаю MediaSource и добавляю в него буфер
- Добавляю в буфер эти кусочки
Кусочки добавляю не сразу все, а один за другим, а именно когда в video опустошается буфер, то есть наступает событие waiting.
- После загрузки файла и разбивки, сразу добавляю первый кусок для инициализации и установки duration
- Видео начинает проигрываться, все отлично
- Затем, когда в плеере нет новых данных для проигрывания (после события waiting), добавляю новый кусок
- Видео снова начинает проигрываться, наступает canplay, playing, canplaythrough, timeupdate, timeupdate...
- Цикл повторяется 3 раза хорошо
- Когда временная шкала плеера доходит до 10.61 сек., то видео зависает
Видео зависает после добавления очередного куска на 10.61 сек., хотя новые данные в буфере есть(2.5 сек.), но почему то не происходит события canplay после добавления данных. Хром чего-то ожидает, хотя казалось бы есть новые данные - продолжай их играть. Никаких ошибок нет, ни в видео, ни в буфере, ни в MSE
Что мешает хрому проиграть очередной этот кусок не понятно, он просто останавливается и крутится штатное колесико и ожидает данные(?)
Заставить видео вновь начать играть можно двумя способами:
1) video.currentTime = video.currentTime //тупо установить текущую позицию на такую же
2) Подергать вручную временную шкалу, не важно куда чуть взад или вперед
3) Добавить новый кусок
Тогда видео продолжит снова играть, но останавливается уже на 31.9 сек.(уже подольше)
В каких случаях видео не останавливается
- Если разбивать на меньшее количество кусков, например 5
- Если добавлять новый кусок сразу после события onupdateend
Не могу понять что за магические метки времени на которых останавливается видео: 10.61 и 31.9 сек.
В Firefox все проигрывается до конца, такой баг только в хромоподобных браузерах(проверял в хроме и опере)
Вот пример кода, там можно заметить на 10 сек. что на шкале есть загруженные данные, но они не проигрываются
https://jsfiddle.net/1w4hyrke/1/