Size: a a a

Vue.js Russian Developers Community

2020 August 19

РМ

Рафаил Мамедов... in Vue.js Russian Developers Community
Добрый день, немного оффтопа, но чат вроде не занят
Есть у кого на примере какие-нибудь дельные статьи или мысли или еще что-то, что поможет решить следующую задачу раздачи видеоконтента
Есть около ~10к часов  (и будут увеличиваться) записей соревнований, сейчас они в виде больших видеофайлов, но можно организовать так, как удобно будет
У каждого файла есть информация о месте съемки и времени начала съемки

Мне нужно как-то их хранить, чтобы можно было эффективно обращаться к этому видео с клиентских приложений
⁃ к произвольному фрагменту при помощи перемотки
⁃ с частой перемоткой вперед/назад
⁃ к произвольному фрагменту по времени (22.02.2020 18:32:21, место А)
⁃ составлением плейлистов из отдельных кусков разных видео (и в т. ч. прокруткой по ним)
⁃ возможностью отдавать в запрашиваемом качестве

Несложные вычисления на стороне клиента допустимы
К слову, более наглядный пример
Есть 30 видео по 5 часов и условно говоря в каждом из них в каком-то фрагменте присутствует человек А по 5 минут
я каким-то образом определил эти фрагменты
и теперь мне нужно на клиенте воспроизвести 150 минутное видео видео, которое будет содержать все эти 30 фрагментов, но при этом нужно избавиться от «разрывов» нового прогруза
При этом фрагменты заранее либо не определены, либо их очень-очень много для того, чтобы нарезать
источник

АК

Александр Козлов... in Vue.js Russian Developers Community
Рафаил Мамедов
Добрый день, немного оффтопа, но чат вроде не занят
Есть у кого на примере какие-нибудь дельные статьи или мысли или еще что-то, что поможет решить следующую задачу раздачи видеоконтента
Есть около ~10к часов  (и будут увеличиваться) записей соревнований, сейчас они в виде больших видеофайлов, но можно организовать так, как удобно будет
У каждого файла есть информация о месте съемки и времени начала съемки

Мне нужно как-то их хранить, чтобы можно было эффективно обращаться к этому видео с клиентских приложений
⁃ к произвольному фрагменту при помощи перемотки
⁃ с частой перемоткой вперед/назад
⁃ к произвольному фрагменту по времени (22.02.2020 18:32:21, место А)
⁃ составлением плейлистов из отдельных кусков разных видео (и в т. ч. прокруткой по ним)
⁃ возможностью отдавать в запрашиваемом качестве

Несложные вычисления на стороне клиента допустимы
К слову, более наглядный пример
Есть 30 видео по 5 часов и условно говоря в каждом из них в каком-то фрагменте присутствует человек А по 5 минут
я каким-то образом определил эти фрагменты
и теперь мне нужно на клиенте воспроизвести 150 минутное видео видео, которое будет содержать все эти 30 фрагментов, но при этом нужно избавиться от «разрывов» нового прогруза
При этом фрагменты заранее либо не определены, либо их очень-очень много для того, чтобы нарезать
файлы хранить в ts
использовать m3u8 и либу, например hls.js
если нужно отдать конкретный кусок видоса то отдаешь чанками с помощью byterange m3u8 спецификация это поддерживает
источник

РМ

Рафаил Мамедов... in Vue.js Russian Developers Community
Александр Козлов
файлы хранить в ts
использовать m3u8 и либу, например hls.js
если нужно отдать конкретный кусок видоса то отдаешь чанками с помощью byterange m3u8 спецификация это поддерживает
ну тут может получится так, что требуемый фрагмент не будет соответствовать нарезанному чанку

Утрированно например у меня 10 минут видео и 10 чанков по минуте
а мне нужно из этого видео 5 фрагментов по 30 секунд
и тут не совсем понятно как эффективно поступать
источник

РМ

Рафаил Мамедов... in Vue.js Russian Developers Community
Александр Козлов
файлы хранить в ts
использовать m3u8 и либу, например hls.js
если нужно отдать конкретный кусок видоса то отдаешь чанками с помощью byterange m3u8 спецификация это поддерживает
но спасибо от ответ, конечно же!
источник

АК

Александр Козлов... in Vue.js Russian Developers Community
Рафаил Мамедов
ну тут может получится так, что требуемый фрагмент не будет соответствовать нарезанному чанку

Утрированно например у меня 10 минут видео и 10 чанков по минуте
а мне нужно из этого видео 5 фрагментов по 30 секунд
и тут не совсем понятно как эффективно поступать
так а ты чанки динамично режь
источник

РМ

Рафаил Мамедов... in Vue.js Russian Developers Community
Александр Козлов
так а ты чанки динамично режь
а это будет эффективнее чем partial запрос к более крупному файлу?
источник

АК

Александр Козлов... in Vue.js Russian Developers Community
Рафаил Мамедов
а это будет эффективнее чем partial запрос к более крупному файлу?
так а это и есть partial:
источник

АК

Александр Козлов... in Vue.js Russian Developers Community
ты запрашиваешь по timestamp (start, end) нужные фрагменты, на сервере приводишь их к byterange и динамично строишь плейлист и отдаешь его клиенту
источник

РМ

Рафаил Мамедов... in Vue.js Russian Developers Community
Александр Козлов
так а это и есть partial:
я имею в виде такой запрос к большому монолитному mpeg файлу
с заголовком
Range: bytes=6068699136-
источник

АК

Александр Козлов... in Vue.js Russian Developers Community
в одном плейлисте у тебя может быть хоть 100 огромных файлов
источник

АК

Александр Козлов... in Vue.js Russian Developers Community
которые лежат на сервере
источник

АК

Александр Козлов... in Vue.js Russian Developers Community
Рафаил Мамедов
я имею в виде такой запрос к большому монолитному mpeg файлу
с заголовком
Range: bytes=6068699136-
а если тебе нужно будет проиграть два файла друг за другом в одном плеере?
источник

РМ

Рафаил Мамедов... in Vue.js Russian Developers Community
Александр Козлов
а если тебе нужно будет проиграть два файла друг за другом в одном плеере?
тут трабла, получается, что я когда заканчивается 1 файл за -10-20 секунд начинаю грузить второй руками
но в принципе hls так и работает, просто размеры этих чанков меньше намного, но при этом нужна потоковая нарезка, а большие файлы можно просто выкинуть куда-то на selectel вообще без какого-то кастомного обработчика

и вот вопрос что будет удобнее и эффектинее
источник

АК

Александр Козлов... in Vue.js Russian Developers Community
Рафаил Мамедов
тут трабла, получается, что я когда заканчивается 1 файл за -10-20 секунд начинаю грузить второй руками
но в принципе hls так и работает, просто размеры этих чанков меньше намного, но при этом нужна потоковая нарезка, а большие файлы можно просто выкинуть куда-то на selectel вообще без какого-то кастомного обработчика

и вот вопрос что будет удобнее и эффектинее
зачем их грузить руками?
hls.js сам все сделает
источник

РМ

Рафаил Мамедов... in Vue.js Russian Developers Community
Александр Козлов
зачем их грузить руками?
hls.js сам все сделает
руками это когда организация в виде больших файлов

когда hls естественно не надо
источник

АК

Александр Козлов... in Vue.js Russian Developers Community
смотри:
у тебя на сервере хранятся монолитные файлы - пусть хранятся.
С помощью m3u8 ты можешь запрашивать byterange конкретного файла т.е.
есть 3 файла по 10 минут, ты можешь построить плейлист который начинается с середины первого, полностью включает 2-ой файл и заканчивается в середине 3-го. Просто ты будешь строить плейлист с помощью
#EXT-X-BYTERANGE
указывая для каждого файла конкретный байт начала и конца + к этому всему у тебя будет приходить качественная мета и все будет корректно отображаться
источник

АК

Александр Козлов... in Vue.js Russian Developers Community
Хочешь использовать более мелкие чанки - ни каких проблем, просто у тебя внутри плейлиста будет больше блоков с одинаковыми урлами на файлы
источник

РМ

Рафаил Мамедов... in Vue.js Russian Developers Community
Александр Козлов
смотри:
у тебя на сервере хранятся монолитные файлы - пусть хранятся.
С помощью m3u8 ты можешь запрашивать byterange конкретного файла т.е.
есть 3 файла по 10 минут, ты можешь построить плейлист который начинается с середины первого, полностью включает 2-ой файл и заканчивается в середине 3-го. Просто ты будешь строить плейлист с помощью
#EXT-X-BYTERANGE
указывая для каждого файла конкретный байт начала и конца + к этому всему у тебя будет приходить качественная мета и все будет корректно отображаться
идея понятна
а есть пример такого построения плейлиста?
источник

АК

Александр Козлов... in Vue.js Russian Developers Community
Рафаил Мамедов
идея понятна
а есть пример такого построения плейлиста?
источник

РМ

Рафаил Мамедов... in Vue.js Russian Developers Community
это получается 5 чанков по 4 минуты?
и в  EXT-MEDIA-SPRITE ссылка на каждый чанк?
источник