Какую технологию использовать для проигрывания видео в браузере с ручной подгрузкой байтов?
Задача такая:
1. Из произвольного источника получаются куски видео в виде набора байтов.
2. Эти байты доступны в браузере
3. Нужно воспроизводить их в видео-плеере по очереди
4. Куски видео не связаны друг с другом (т.е. это не заранее нарезанное видео), но проигрываться должны бесшовно.
Вопрос:
1. Какой формат видео лучше использовать, чтобы каждый кусок содержал всю необходимую информацию для проигрывания и воспроизведение было бесшовным?
2. Какую технологию (готовый плеер) в браузере лучше использовать?
2. Возможно ли на лету кодировать в нужный формат видео, если исходный формат байтов будет неподходящим?
Дополнительно:
несколько ссылок
- обзор в целом в статье: Video processing with WebCodecs
- MDN WebCodecs API
Облом в том, что всё это не поддерживается пока в FireFox.
4. Куски видео не связаны друг с другом (т.е. это не заранее нарезанное видео), но проигрываться должны бесшовно.
Это невозможно в принципе. Если мы получаем набор несвязанных данных, то видео поток их них мы не сможем выстроить ни при каких условиях.
Либо ваше ТЗ слишком скудное, и информации не достаточно.
А бесшовно всего лишь означает, что если два куска являются частью одного видео, то пользователь не должен видеть никаких переходов. При этом куски могут быть из одного исходного видео, а могут не быть.
[-----A----|---------------B-----------------]
[-x1-|--------x2--------|---------x3--------]
A - исходное целое видео
B - исходное целое видео
Пользователь не должен заметить перехода между x1 и x2, а также между x2 и x3. А что там будет внутри куска x2 - не важно
Не хочется пилить велосипед, поэтому вопрос несколько шире - про выбор готовой технологии и кодеков.
Ответы:
Когда то давно я открывал два плеера (друг над другом один скрыт другой виден), загружал в оба плеера видеофайлы, ставил на паузу (особенность, если просто указать видео в режиме паузы оно не загружается, загрузка начинается в момент проигрывания, но это было давно может уже поменялось что, советую просто проверить), и затем по мере окончания проигрывания одного, я скрывал его, делал видимым второе видео и отключал паузу в нем.... причем паузу можно отключать на доли секунды заранее, подруливая громкостью, делать плавный переход от одного к другому.
Если пользователю нужны элементы управления видео, и зачем то нужно управление с клавиатуры (фокусировка на контролах) то они будут сбиваться при смене плеера, кажется это решается, но мне кажется таких пользователей будет минимум.
p.s. вполне возможно что сейчас лучше/удобнее формировать .m3u8 плейлист, javascript там продвинутый у html video, но если что его можно формировать и прописывать с помощью data uri.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для проигрывания видео в браузере с ручной подгрузкой байтов можно использовать технологию Media Source Extensions (MSE). MSE позволяет программно управлять потоком медиаданных в JavaScript, что делает его идеальным выбором для реализации проигрывания видео с ручной подгрузкой данных.
Для начала необходимо подготовить видеофайл в формате, поддерживаемом браузером (обычно это MP4 или WebM). Затем нужно создать HTML5 видео элемент на странице и добавить обработчики событий JavaScript для управления потоком данных.
Пример использования MSE для проигрывания видео в браузере с ручной подгрузкой байтов на языке программирования JavaScript:
const videoElement = document.querySelector('video'); const mediaSource = new MediaSource(); videoElement.src = URL.createObjectURL(mediaSource); mediaSource.addEventListener('sourceopen', function() { const sourceBuffer = mediaSource.addSourceBuffer('video/mp4'); fetch('video.mp4') .then(response => response.arrayBuffer()) .then(data => { sourceBuffer.appendBuffer(data); }) .catch(error => { console.error('Error fetching video data:', error); }); });
В этом примере создается объект MediaSource, который связывается с HTML5 видео элементом. После открытия источника данных с помощью события 'sourceopen' создается и добавляется исходный буфер данных. Затем происходит загрузка видеофайла с помощью fetch и передача его в исходный буфер данных.
Таким образом, использование технологии Media Source Extensions позволяет проигрывать видео в браузере с ручной подгрузкой байтов, что дает большой контроль над потоком данных и позволяет реализовать различные интересные функции в проигрывании видео.