Потокове передавання відео HLS: що це таке, і коли його використовувати

У цій короткій статті я зупинюсь на HLS, найбільш розширеному адаптивному протоколі бітрейту для доставки відео. Я відповім на деякі основні запитання, які, напевно, розглядає той, хто вперше розглядає ЗСЖ: що це таке, коли його використовувати і як ним користуватися.

Щоб допомогти в цьому, я покажу кілька прикладів із використанням інструменту публікації відео в Інтернеті, який ви можете вільно використовувати для перевірки ефективності HLS самостійно.

Що таке ЗСЖ і як це працює?

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

Найважливішою особливістю HLS є його здатність адаптувати бітрейт відео до фактичної швидкості з'єднання. Це оптимізує якість досвіду.

Відео HLS кодуються в різних передачах з різною роздільною здатністю та бітрейтом. Зазвичай це називають драбинною швидкістю. Коли з’єднання стає повільнішим, протокол автоматично регулює запитуваний бітрейт до доступної пропускної здатності.

Порівняно з прогресивними відео, HLS дозволяє уникнути ефектів повторної буферизації та зупинення, а також роздуття підключення клієнта. Ми можемо побачити це на роботі у цьому відео.

По суті, HLS забезпечує набагато кращу взаємодію з користувачами, коли ми використовуємо відеовміст у наших програмах або на сайтах.

Він має вбудовану підтримку в iOS та Android. Він також підтримується Safari, а за допомогою деяких JavaScript він підтримується у всіх основних браузерах (Chrome, Firefox, Edge). Хоча використання HLS вимагає певних зусиль, це не є великою проблемою.

Давайте подивимося, коли і як нам це використовувати.

Коли ми повинні використовувати ЗСЖ?

Бувають випадки, коли відео не такі важкі. Наприклад, у вас може бути послідовність зображень, закодованих у вигляді 1-2-секундного відео, вагою менше 1 МБ. У цьому випадку прогресивне відео - яке можна споживати, як зображення, використовуючи звичайний HTML5 - це, безумовно, найкращий варіант. HLS тут не пропонує жодної переваги.

Але HLS має сенс, коли ми хочемо передавати відео з високою роздільною здатністю (HD або більше) вагою понад 3 Мб. Цей тип вмісту може вбити наш веб-інтерфейс, якщо його переглядати на середньому мобільному з’єднанні.

Варто зазначити, що це має місце у зростаючій кількості медіа-контенту, включаючи багато коротких відеороликів тривалістю менше 20 секунд, що використовуються в контексті електронної комерції та маркетингу. У прикладі на початку допису ми маємо відео у форматі Full HD лише 9 секунд із вагою понад 6 МБ.

Як ми можемо використовувати 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

Якщо нам потрібно налаштувати досвід роботи з відео - що досить часто зустрічається на сторінках маркетингу та історій - тоді нам потрібно використовувати щось інше, ніж програвач HTML5 за замовчуванням.

Хоча існує багато комерційних опцій, Video.js є хорошим вибором. Це програвач із відкритим кодом, який підтримує високий ступінь налаштування, включаючи різні обкладинки та елементи керування.

Такий програвач, як Video.js, також підтримує відстеження подій, пов’язаних із відео (наприклад, дії відтворення або призупинення), щоб ми могли включити їх у свою власну аналітику. Насправді включити ці дані до нашої Google Analytics дуже просто.

Резюме

Я вирішив перші питання щодо HLS, які матимуть більшість потенційних користувачів: що це таке, і коли ми повинні ним користуватися.

Незважаючи на те, що конвеєр для публікації відео, що залежить від HLS, може бути впроваджений і розгорнутий у власному розпорядженні за допомогою таких інструментів з відкритим кодом, як FFMPEG та video.js, може бути гарною ідеєю скористатися послугою публікації відео, якщо ви не фахівець у цій галузі. Вони пропонують розширені функції, такі як кодування кожного заголовка, дбають про всю важку роботу і дозволяють зосередитись на наших потребах в налаштуванні.