Як Yahoo перейшла від Flash до HTML5 відео


Adobe Flash колись був стандартом де-факто в світі веб-медіа, але з часом індустрія відвернулася від нього з міркувань безпеки і продуктивності. Вимагати у юзерів встановлювати плагін для відтворення відео — теж погана практика. В результаті, ми переходимо до HTML5 для відео.
Розробка в області відтворення відео HTML5 все ще у зародковому стані, і спочатку браузери підтримували ці можливості в самому примітивному вигляді. Тільки останнім часом підтримка була розширена і стала включати адаптивний стрімінг. Адаптивний стрімінг має дві головні переваги:
  • Адаптивний бітрейт (ABR): Алгоритм визначає пропускну здатність каналу користувача, потужність процесора, розмір плеєра і т. д. в реальному часі і налаштовує параметри відео.
  • Змінюваний розмір буфера: можливість, що дозволяє нам керувати часом, що потрібно для запуску відтворення.
Ці можливості дозволили індустрії стрімінг відео перейти від Flash до HTML5 і JavaScript.
Наш відео-плеєр Yahoo використовує HTML5 у всіх сучасних браузерах. У цьому пості ми опишемо наш шлях до реалізації цих можливостей, розповімо про проблеми, з якими зіткнулися, і опишемо можливості, які ми бачимо.
Перші кроки в бік HTML5
Ми зробили перші кроки у бік HTML5 в жовтні 2015, коли ми організували глобальний прямий ефір гри NFL в перший раз. Для цієї події ми викотили "чистий" HTML5-плеєр на Safari. Він був заснований на нативної підтримки HTML5 у браузері HTTP Live Streaming (HLS). В рамках цієї події, ми розробили спеціальні можливості для включення різних типів фонового в залежності від браузера клієнта (підтримка Flash, конфігурація пристрою, операційна система, браузер тощо).
Архітектурні рішення
Щоб домогтися підтримки HTML5 у всіх браузерах, нам потрібно було заново спроектувати стрімінг в нашому плеєрі. Перед нами постав вибір, і рішення можгло вплинути на весь бізнес Yahoo і на власний досвід.
Перший і, мабуть, найважливіший момент — який стриминговый протокол підтримувати. Вибір був між HLS і DASHвони обидва підтримують адаптивний стрімінг по HTTP. Однак, щоб стік залишався досить простим, і розробка досить швидкої, ми вирішили підтримувати HLS. Для iOS нам довелося б підтримувати HLS в будь-якому випадку, і з розвитком стандарту в якийсь момент Media Extensions Source (MSE) може почати працювати з HLS. MSE — це недавня розробка стандарту HTML5, яка дозволяє динамічно генерувати медіа-потоки для відтворення через tag.
Наступного питання — будувати самим, купувати готовий або використовувати HTML5-плеєр з відкритим вихідним кодом (open source). Yahoo — не єдині, кому потрібний був HTML5-плеєр. Також існує кілька проектів з відкритим вихідним кодом. Використовувати їх — значить заощадити час на початку. Однак, аналіз, і в тому числі тестування в реальних умовах іншими гравцями на ринку, показав, що існуючі плеєри не надають досить якості, продуктивності і масштабованості, які ми очікуємо від Yahoo Video Player.
І, нарешті, наш існуючий відео-плеєр, який підтримує Flash, був уже зрілим і перевіреним часом. Нам потрібно було вирішити, чи варто переносити дизайн і логіку з Flash в JavaScript, або будувати і проектувати плеєр з нуля. Ми вибрали друге. Це дозволило добитися деяких архітектурних цілей, у тому числі такого рівня розширюваності, який дозволив підтримувати DASH на більш пізніх етапах. Це рішення дозволило нам уникнути проблем і недоліків, пов'язаних з минулим дизайном.
Як ви побачите нижче, всі ці рішення принесли нам багато користі.
Zoom у майбутнє
Озброївшись цими рішеннями, ми розпочали розробку плеєра, який звільнив нас від Flash. Проектом дали кодову назву "Zoom", це головний ворог супергероя Flash з всесвіту DC Comics.
Медіа-конвеєр для HLS-стрімінг выглядил так:
img
Малюнок 1. Медіа-конвеєр для HTML5
Плеєр виконує роль демультиплексора для вхідного транспортного потоку(MPEG-TS). Він розбиває потік на аудіо та відео, які потім упаковуються в фрагментований формат MP4, який приймається рівнем MSE у браузері.
Коли ми проектували новий HTML5-плеєр, у нас було кілька цілей. Він повинен бути:
  • Модульним: кожен компонент повинен розвиватися окремо і тестуватися незалежно
  • Розширюваним: новий плеєр повинен мати можливість підтримувати нові фічі (наприклад, DASH) без необхідності проектувати плеєр заново.
  • Без стану (stateless): ми можемо використовувати компоненти (зразок ABR) в різних інстансах плеєра на одній сторінці або в одному додатку.
Малюнок 2 нижче показує високорівневу архітектуру нового HTML5 MSE-плеєра.
img
Малюнок 2. Архітектура HTML5-плеєра Yahoo
  • Framework Services надає загальні можливості, такі як HTTP-завантажувач (для завантаження відео), Web Workers (для багатопоточності), і визначник пропускної здатності каналу.
  • Stream & Media Services включають в себе сервіси, які обробляють медіа на різних етапах конвеєра. У тому числі завантаження транспортного потоку, розбиття потоку і упаковка в MP4, який і буде програватися з допомогою MSE.
  • Streaming Controller — це компонент, який управляє стримингом відео-контенту. Він також спілкується з движком ABR щоб визначити потрібний бітрейт.
  • Playback Controller відповідає за програвання відео з використанням різних модулів. Він зберігає в собі кінцевий автомат з різними станами відтворення. Він також надає API для відтворення, паузи, перемотування і так далі.
Проблеми
По-перше, ми переходили від єдиного фреймворку (Adobe Flash), який надавав однакову оточення у всіх браузерах, до кількох фреймворкам (MSE, XHR, Web Workers, HTML5 Media Elements) на різних платформах і браузерах (Chrome, Firefox, IE, Edge, Safari, тощо), кожен з яких додавав свої заморочки в систему.
Друга проблема полягала в рекламі. Відтворення відео перейшло до HTML5, але більшість рекламодавців в світі відео продовжували використовувати Flash. Тому нам треба було знайти спосіб показувати рекламу на Flash, відео при цьому відтворювати через HTML5. Ми зробили так, що наш плеєр може використовувати кілька рендер-компонентів, кожен їх яких підтримував свою техніку візуалізації (Flash, HTML5, тощо). Це дозволило зберегти оптимальні умови для користувача і не втратити дохід.
Третя проблема — як покращити залучення користувачів, ключову метрику успішного споживання відео. Ми хотіли, щоб користувачі залучалися і взаємодіяли з відео постійно, і щоб це не вимагало ніяких дій з їх боку, таких як клік або додаткове завантаження сторінки. При цьому, ми не хотіли, щоб на сторінках було послідовне відтворення. Тому ми включили "плейлисти" в API першого класу в самому відео-плеєрі. Тепер ми можемо задавати керована список відео, які дуже залежать від контексту і персоналізований для конкретного користувача.
Малюнок 3 нижче показує високорівневу архітектуру відео-плеєра Yahoo.
img
Малюнок 3. Архітектура відео-плеєра Yahoo
  • Controller відповідає за перемикання рендер-компонентів і надає доступ до різних функцій відтворення.
  • Ads Controller управляє і прогрывает відео-рекламу.
  • Playlist Manager управляє відео-плейлистами і надає доступ до функцій плейлиста.
Продуктивність (повторна буферизація та час запуску) — головний двигун залученості користувачів. Зміни, пов'язані з продуктивністю, завжди пов'язані з перешкодами.
Демультплексинг аудіо/відео і упаковка MP4 — дорогі для процесора операції. Якщо проводити ці операції в головному UI-тред браузера, то це вплинуть на чуйність користувальницького інтерфейсу сторінки і плеєра. На щастя, в браузерах є web workers, дозволяють задіяти багатопоточність, але їх використання означає, що треба здійснювати передачу повідомлень між потоками.
З нашого досвіду, в Firefox використання воркера для розбиття потоку і упаковку MP4 було на 20% більш ефективним (якщо порівнювати з варіантом без воркера). З іншого боку, ми виявили, що додаткове навантаження, пов'язана з передачею повідомлень між потоками, особливо помітна в IE і Edge, і це призводить до підвищення рівня повторної буферизації. Щоб вирішити ці проблеми ми внесли наступні зміни:
  • Запускати одиниці обробників всередині воркеров
  • Мінімізувати сполучення між потоками
Ефективне використання веб-воркеров для трансформації медіа дало нашого плеєра перевагу в продуктивності в порівнянні з іншими плеєрами. Це 10%-20% поліпшення для процесора і 30% поліпшення у показнику повторної буферизації.
Можливості
Не дивлячись на те, що ми зіткнулися з безліччю проблем, проектування свого плеєра дало нам можливість додати функції, недоступні в минулому плеєрі.
Так як ми додали можливість перемикати рендер-компоненти і підтримувати рекламу на Flash, а контент — на HTML5, ми змогли побудувати попередню завантаження відео. Тобто ми можемо почати завантажувати наступне відео в плейлисті ще до початку відтворення. Наприклад, коли реклама завантажилася і почала програватися, ми можемо заздалегідь завантажити контент на тлі. Перехід від реклами до відео виходить як у телевізорі.
Ми також поліпшили алгоритм, який визначає пропускну здатність каналу. Спочатку він був заснований виключно на часі завантаження контенту. Ми додали до нього інформацію, одержувану з API, наприклад TTFB (Time To First Byte — час до першого байта).
ми Ще додали фічу, яка дозволяє перемикати бітрейт на рівні ключових кадрів. Це допомогло нам краще реагувати на несподівані зміни умов у мережі.
Результати
Ми почали викочувати новий HTML5-плеєр у Google Chrome, і з часом додавали підтримку інших браузерів. Зараз новий плеєр працює у всіх сучасних браузерах. Малюнок 4 показує кількість переглядів відео в залежності від використовуваного рендер-компонента. Сьогодні ми використовуємо HTML5-рендер для приблизно 70% трафіку. Це число буде рости з впровадженням плеєра в інші частини мережі Yahoo. Найбільш примітна платформа, яка не підтримує MSE це IE в Windows 7. Там продовжує використовуватися Flash.
img
Малюнок 4. Перегляди та спосіб фонового
Що стосується такої важливої метрики як показник повторної буферизації, то HTML5-плеєр знаходиться приблизно на одному рівні або трохи краще, ніж Flash (рис. 5).
img
Малюнок 5. Показник повторної буферизації — Flash vs. HTML5
HTML5 — краще, коли справа стосується часу старту після того, як користувач натиснув на "PLAY". Малюнок 6 показує затримку між натисканням на "PLAY" і рендером першого кадру відео (Click To Play Latency) для Flash і для HTML5-плеєрів.
img
Малюнок 6. Click To Play Latency – Flash vs. HTML5
На цих графіках добре видно переваги HTML5-плеєра: більш швидке завантаження, краща продуктивність і так далі.
далі
Адаптивний стрімінг в інтернеті швидко розвивається. Індустрія поки сфокусована на оптимізації програвання в контексті одного плеєра, а в Yahoo ми також працюємо над оптимізацією стрімінг декількох відео на одній сторінці. Ми також працюємо над тим, щоб MSE-HTML5-плеєри прийшли у світ мобільного інтернету.
Apple недавно оголосили про підтримку фрагментованих MP4 в якості транспортного потоку в HLS. Це рішення добре сходиться з нашим рішенням працювати з HLS. Це дає нам три переваги:
  • Спрощення плеєра, так як MP4 нативно сумісний з MSE.
  • Поліпшення продуктивності плеєра завдяки відходу від дорогих для процесора операцій з розбиття потоку і складання в MP4.
  • Зменшення кількості переданої інформації та поліпшення якості й часу старту.
Ми продовжуємо фокусуватися на поліпшення сучасних технологій стрімінг в інтернеті, і ми наймаємо нових людей! Пишіть листи на amitnj@yahoo-inc.com, і ми обговоримо кар'єрні можливості в нашій команді.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.