Как мы обеспечили быструю и регулярную доставку видео

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

С чего все начиналось

Все больше сайтов используют видео для привлечения внимания. Размещают обзоры товаров, отзывы и рекламные акции. Многие сталкиваются с проблемами: задержкой запуска, подвисанием и чрезмерными нагрузками на сеть. Нас они тоже не обошли. В QForm раньше при установке нескольких видеовиджетов кадры подвисали при воспроизведении.

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

Сначала определили, что нужно реализовать механизм, при котором запуск видео будет происходить последовательно и без подвисаний. Так люди будут спокойно смотреть ролики, а не раздраженно покидать страницу.

Для этого поставили себе задачи:

• сжатие видео без потери качества;
• настройка запуска;
• снижение нагрузки на сеть.

Этапы работ

Идея состояла в том, чтобы пользователь получал видео непрерывным потоком. Передача потокового видео использует технологии сжатия и буферизации данных, благодаря чему трансляция ведется непрерывно при отправке потока как последовательности сжатых пакетов. Это значит, что видеофайл в сжатом виде хранится на веб-сервере. При просмотре данные передаются отдельными пакетами по мере загрузки, не снижая качество изображения и звука. Этот способ стал популярным благодаря стриминговым сервисам, таким как YouTube, а позже его подхватили и социальные сети (ВКонтакте).

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

Определившись с идеей, команда разработчиков приступила к задачам. Для создания обработчика в потоковое видео был взят язык программирования Go (Golang). На нем бэкенд-разработчики написали микросервис, который берет из хранилища в порядке очереди созданные видео, обрабатывает их и перекодирует с помощью библиотеки ff-mpeg. В процессе перекодирования файл разделяется на отрезки, каждый из которых сжимается. Эти кусочки и будут подгружаться в качестве сжатых пакетов при просмотре. Также в это время создается превью – семисекундный отрывок видео, который циклично будет проигрываться в зависимости от настроек показа (после загрузки страницы или при наведении мыши). По завершении процесса файл возвращается в хранилище. Пока происходит обработка, видеофайл недоступен для просмотра на сайте.

Далее, чтобы снизить нагрузку на сеть, мы добавили функции:

• Воспроизведение видео при наведении мыши. Позволяет пользователю не отвлекаться и выбрать определенное превью к просмотру.
• Запуск в зоне видимости. Воспроизведение будет только в случае, если определенная часть видеовиджета находится в зоне видимости.

Таким образом обеспечивается быстрая и регулярная потоковая передача видео.
Трансляция будет идти без торможения и без потери качества.

К чему пришли

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

В результате мы получили:

• снижение нагрузки на сеть;
• сжатое видео без потери качества;
• превью для привлечения внимания и настройку запуска;
• уменьшение числа отказов;
• увеличение количества просмотров и времени нахождения на сайте, что хорошо для ранжирования.

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

Разобраться в QForm и использовать видеовиджет на своем сайте можно самостоятельно.

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