HLS видео стрийминг: какво е и кога да го използвате

В тази кратка статия ще се спра на HLS, най-разширеният адаптивен битрейт протокол за доставка на видео. Ще отговоря на някои от основните въпроси, които всеки, който обмисля HLS за първи път, вероятно ще зададе: какво е това, кога да го използва и как да го използва.

За да помогна по този начин, ще покажа няколко примера с помощта на инструмент за онлайн публикуване на видео, който можете свободно да използвате, за да тествате ефективността на HLS сами.

Какво е HLS и как работи?

HLS е протокол, дефиниран от Apple за внедряване на адаптивен битрейт стрийминг формат, който може да се поддържа на техните устройства и софтуер. С течение на времето той получи широка подкрепа.

Най-важната характеристика на HLS е способността му да адаптира битрейта на видеото към действителната скорост на връзката. Това оптимизира качеството на преживяването.

HLS видеоклиповете са кодирани в различни предавания с различна резолюция и битрейт. Това обикновено се нарича битрейт стълба. Когато връзката стане по-бавна, протоколът автоматично коригира заявената битрейт към наличната честотна лента.

В сравнение с прогресивните видеоклипове, HLS избягва повторно буфериране и забавяне на ефектите, както и подуване на връзката на клиента. Можем да го видим на работа в това видео.

По същество HLS предоставя много по-добро потребителско изживяване, когато използваме видео съдържание в нашите приложения или сайтове.

Той има вградена поддръжка в iOS и Android. Той се поддържа и от Safari и с помощта на някои JavaScript се поддържа във всички основни браузъри (Chrome, Firefox, Edge). Въпреки че използването на HLS изисква известни усилия, това не е голяма работа.

Нека да видим кога и как да го използваме.

Кога трябва да използваме HLS?

Има случаи, когато видеоклиповете не са толкова тежки. Например, можете да имате поредица от изображения, кодирани като 1-2 секунди видео, с тегло по-малко от 1 MB. В този случай прогресивно видео - което може да се консумира, като изображение, използвайки обикновен HTML5 - със сигурност е най-добрият вариант. HLS не предлага никакво предимство тук.

Но HLS има смисъл, когато искаме да предоставяме видео с висока разделителна способност (HD или повече) с тегло над 3MB. Този тип съдържание може да убие нашия уеб UX, когато се гледа на средна мобилна връзка.

Струва си да се отбележи, че това е така при все по-голямо количество медийно съдържание, включително много кратки видеоклипове с по-малко от 20 секунди, използвани в контекста на електронната търговия и маркетинга. В примера в началото на публикацията имаме Full HD видео от само 9 секунди, което тежи над 6MB.

Как можем да използваме HLS в нашите сайтове?

За да използваме HLS, трябва да обърнем внимание на редица аспекти. Ще се спра на две важни точки:  

  • необходимостта от кодиране на видео и,
  • необходимостта да го вградите в нашата страница.

За по-изчерпателен поглед върху това, което включва общ конвейер за видеоиздаване, можете да разгледате тази публикация.

HLS кодиране

Можем да кодираме видеоклипове в HLS вътрешно или като използваме услуга на трета страна. За да изградите вътрешен енкодер, най-добрият вариант е да използвате FFMPEG, мощна библиотека с отворен код за обработка на видео и кодиране. В този случай трябва да анализираме съдържанието, което ще кодираме, и да зададем редица параметри.

В HLS трябва да дефинираме битрейт стълба (битрейтите и резолюциите на всяка стъпка) и дължината на парчетата. Когато кодираме видео, завършваме с набор от плейлисти и парчета. Обикновено завършваме първата с .m3u8, а втората с разширения .ts. Можем да видим пример в следващото изображение.

Можем да видим един главен плейлист, един допълнителен плейлист за предаване и всички парчета от всяко предаване. Главният плейлист посочва стълбата на битрейт и относителния път към всяко предаване.

Apple дава обща препоръка, като посочва стълбата на битрейта и продължителността на парче от 10 секунди. Това обаче не е много полезно за много видове съдържание, като кратките видеоклипове, често срещани в електронната търговия и маркетинга.

Всъщност най-добрият подход е да настроите стълбата на битрейта специално към съдържанието на видеото. В този случай, ако искате да се възползвате максимално от HLS и не сте експерт в кодирането, услугата на трета страна, предоставяща кодиране по заглавие (с HLS), вероятно е правилният избор.

HLS играчи

Тук ще открием две основни опции. Можем да се придържаме към HTML5 плейъра или да използваме такъв, реализиран в JavaScript.

HTML5 плейър

Последните версии на Safari поддържат HLS. В този случай можете да използвате плейлисти на HLS по същия начин като прогресивните видеоклипове. С други браузъри можете да използвате малка JavaScript библиотека, за да внедрите протокола HLS и отново да използвате HTML5 плейъра за прогресивни видеоклипове.

Това може да се направи с HLS.js. Тази библиотека просто реализира договарянето на предавания въз основа на наличната честотна лента. Поддръжката е почти универсална, зависи само от поддръжката на API на медийния елемент.

JavaScript Player

В случай, че трябва да персонализираме видео изживяването - което е доста често срещано в страниците за маркетинг и истории - тогава трябва да използваме нещо различно от HTML5 плейъра по подразбиране.

Въпреки че има много търговски опции, Video.js е добър избор. Това е плейър с отворен код, който поддържа висока степен на персонализация, включително различни кожи и контроли.

Плейър като Video.js също поддържа проследяването на събития, свързани с видео (като възпроизвеждане или пауза), за да можем да ги включим в собствения си анализ. Всъщност включването на тези данни в нашия Google Analytics е наистина лесно.

Обобщение

Справих се с първите въпроси за HLS, които повечето потенциални потребители ще имат: какво е това и кога трябва да го използваме.

Докато конвейерът за видеоиздаване, разчитащ на HLS, може да бъде внедрен и внедрен вътрешно с инструменти с отворен код като FFMPEG и video.js, може да е добра идея да използвате услуга за видеоиздаване, ако не сте експерт в технологията. Те предлагат усъвършенствани функции като кодиране по заглавие, грижат се за цялата упорита работа и ни позволяват да се съсредоточим върху нашите нужди от персонализиране.