02. Анатомія Медіа: Кодеки, Контейнери та Стиснення

1. Вступ та Контекст

Відео — це ілюзія. Це просто серія картинок, які змінюються так швидко, що око не помічає підміни. Але якщо ми збережемо ці "картинки" як звичайні BMP чи PNG файли, то 1 година фільму займе терабайти місця.

Чому ж тоді фільм на Netflix займає всього 1-2 ГБ? Відповідь: Математичне шахрайство (або, науковою мовою, компресія з втратами).

Аналогія: Валіза

Уявіть, що ви пакуєте валізу у відпустку.

1. Lossless (Без втрат): Ви акуратно складаєте кожну футболку (ZIP-архів). Коли ви її дістанете, вона буде точнісінько такою ж.
2. Lossy (З втратами): Ви вирішуєте, що ось ця футболка стара і вам не потрібна, а ось ці шкарпетки можна купити на місці. Ви викидаєте частину речей, щоб валіза закрилася.
   • Відеокодеки роблять саме це: вони викидають інформацію, яку ваше око (ймовірно) не помітить.

2. Фундаментальні Концепції: Контейнер vs Кодек

Це класична плутанина.

• "MP4" — це не відео. Це коробка.
• "H.264" — це відео. Це те, що лежить у коробці.

Глибше про Контейнери: Архітектура Медіафайлу

Контейнер — це не просто "коробка". Це структурований формат зберігання, який організує різнорідні потоки даних у єдиний файл.

Аналогія: Поштова Посилка

Уявіть, що ви відправляєте посилку другові:

• Коробка (контейнер) — це .mp4, .mkv, .mov. Вона визначає, як все упаковано.
• Вміст (потоки):
  • Основний подарунок — відео потік (закодований H.264)
  • Додатковий подарунок — аудіо потік (закодований AAC)
  • Листівка — субтитри (текст SRT)
  • Наклейка з адресою — метадані (назва, автор, дата створення)

Важливо: Ви можете покласти той самий подарунок (H.264 відео) в різні коробки (MP4 або MKV) — це працюватиме. Але деякі коробки (WebM) приймають тільки певні подарунки (VP9, AV1).

Що саме зберігає контейнер?

1
00:00:10,500 --> 00:00:13,000
Привіт, це перший субтитр.

2
00:00:15,000 --> 00:00:18,000
А це другий.

Chapter 1: 00:00:00 - Intro
Chapter 2: 00:05:30 - Main Act
Chapter 3: 00:45:00 - Climax

Популярні Контейнери: Порівняння

Структура MP4: Атоми та Боксики

MP4 побудований з атомів (atoms) — це блоки даних, що вкладаються один в одного, як матрьошки.

graph TD
    A[MP4 File] --> B[ftyp <br> File Type]
    A --> C[moov <br> Metadata + Index]
    A --> D[mdat <br> Actual Media Data]

    C --> C1[mvhd <br> Movie Header]
    C --> C2[trak <br> Video Track]
    C --> C3[trak <br> Audio Track]

    C2 --> C2A[tkhd <br> Track Header]
    C2 --> C2B[mdia <br> Media Info]
    C2B --> C2B1[mdhd <br> Media Header]
    C2B --> C2B2[hdlr <br> Handler]
    C2B --> C2B3[minf <br> Media Information]

    C3 --> C3A[tkhd <br> Track Header]
    C3 --> C3B[mdia <br> Media Info]

    style A fill:#3b82f6,stroke:#1d4ed8,color:#fff,stroke-width:3px
    style B fill:#f59e0b,stroke:#d97706,color:#fff
    style C fill:#10b981,stroke:#059669,color:#fff
    style D fill:#ef4444,stroke:#dc2626,color:#fff

Основні атоми:

ffmpeg -i input.mp4 -c copy -movflags faststart output_web.mp4

Практичний Приклад: Інспекція MP4

Давайте подивимося, що всередині справжнього MP4 файлу.

# macOS
brew install ffmpeg mediainfo

# Linux
sudo apt install ffmpeg mediainfo

# Детальна інформація про потоки
ffprobe -v quiet -print_format json -show_format -show_streams video.mp4

# Читабельний вигляд
mediainfo video.mp4

General
Format                  : MPEG-4
File size               : 15.2 MiB
Duration                : 2 min 10 s
Overall bit rate        : 980 kb/s

Video
Format                  : AVC (H.264)
Codec ID                : avc1
Resolution              : 1920x1080
Frame rate              : 30.000 FPS
Bit rate                : 850 kb/s

Audio
Format                  : AAC LC
Channels                : 2 channels (Stereo)
Sampling rate           : 48.0 kHz
Bit rate                : 128 kb/s

# Показати всі метадані
ffprobe -v quiet -show_entries format_tags -of json video.mp4

{
    "format": {
        "tags": {
            "major_brand": "isom",
            "minor_version": "512",
            "title": "My Awesome Video",
            "artist": "Creator Name",
            "creation_time": "2024-01-15T10:30:00.000000Z"
        }
    }
}

Популярні Кодеки

3. RGB vs YUV: Кольорові Простори та Секрет Економії

Перед тим як стискати відео, його спочатку треба правильно "упакувати" у кольоровий простір. І тут є хитрий трюк.

RGB: Як бачить комп'ютер

Ваш монітор працює з RGB (Red, Green, Blue). Кожен піксель зберігає 3 числа:

• Red: 0-255 (скільки червоного)
• Green: 0-255 (скільки зеленого)
• Blue: 0-255 (скільки синього)

Для 1920×1080 кадру це 1920 × 1080 × 3 = 6,220,800 байтів (~6 МБ) на один кадр.

YUV: Як бачить людське око

Але є проблема: людське око не рівноцінно сприймає колір та яскравість.

Ми набагато краще бачимо деталі світла й тіні, ніж відтінки кольору.

YUV розділяє ці канали:

Аналогія: Газета

Уявіть старі газетні фото:

• Основна картинка (Y) — чорно-біла, дуже чітка, ви бачите всі обличчя та деталі.
• Колір (U, V) — якби ви додали колір зверху, він був би розмитим, як акварель. Деталізація не потрібна, бо око її не помітить.

Chroma Subsampling: Викидаємо зайве

Ось де починається магія. Якщо око не бачить деталей у кольорі, навіщо зберігати повну роздільну здатність для U та V?

Розрахунок для 1080p (4:2:0):

Y:  1920 × 1080 = 2,073,600 байтів
U:  960 × 540   =   518,400 байтів  (1/4 від Y)
V:  960 × 540   =   518,400 байтів  (1/4 від Y)
────────────────────────────────────
Всього: 3,110,400 байтів (~3 МБ)

Економія: 50% порівняно з RGB, без втрати якості для ока.

4. Механіка Стиснення: Як обдурити око

Тепер найцікавіша частина: як кодеки зменшують розмір у сотні разів?

Секрет простий: вони знаходять повтори і викидають їх.

Два Типи Повторів

Уявіть, що ви фотографуєте свою кімнату кожну секунду протягом 10 секунд.

Конкретний Приклад: Відеодзвінок

Уявіть Zoom-дзвінок:

1. Кадр №1 (0.00 сек): Ви сидите за столом, на фоні книжкова полиця.
   • Кодек зберігає всю картинку: ваше обличчя, стіл, книги.
2. Кадр №2 (0.03 сек): Ви моргнули.
   • Що змінилося? Тільки ваші повіки (≈ 200 пікселів).
   • Що залишилося? Стіл, книги, стіни, волосся (≈ 2,000,000 пікселів).
   • Кодек зберігає: "Візьми кадр №1, зміни лише ось цю ділянку з повіками".
3. Кадри №3-300 (наступні 10 секунд): Ви говорите.
   • Рухаються тільки губи та очі.
   • Все інше (фон, одяг, меблі) — ідентичне протягом 10 секунд.

Результат: Замість зберігати 300 повних картинок, кодек зберігає:

• 1 повна картинка (кадр №1)
• 299 "заплаток" ("Губи трохи вліво", "Око закрите", тощо)

GOP (Group of Pictures): Як це організовано

Кодеки групують кадри у GOP (Группа Картинок). Це як розділи книги.

Кожна група починається з I-фрейму (повної картинки), а далі йдуть P та B-фрейми (різниці).

I-фрейм (00:00): Обличчя дивиться прямо
P-фрейм (00:03): "Обличчя повернулось на 5° вліво, решта без змін"
P-фрейм (00:06): "Губи відкрилися на 2 мм, решта без змін"

Візуалізація GOP

Ось як виглядає типова група з 12 кадрів:

graph LR
    I[I-Frame<br/>Кадр 1<br/>Повна картинка<br/>500 KB] --> B1[B-Frame<br/>Кадр 2<br/>25 KB]
    I --> P1[P-Frame<br/>Кадр 4<br/>100 KB]
    B1 -.використовує.-> P1
    P1 --> B2[B-Frame<br/>Кадр 3<br/>30 KB]
    P1 --> B3[B-Frame<br/>Кадр 5<br/>28 KB]
    P1 --> P2[P-Frame<br/>Кадр 7<br/>120 KB]
    B3 -.використовує.-> P2
    P2 --> B4[B-Frame<br/>Кадр 6<br/>22 KB]
    P2 --> B5[B-Frame<br/>Кадр 8<br/>35 KB]

    style I fill:#ef4444,stroke:#dc2626,color:#fff,stroke-width:3px
    style P1 fill:#3b82f6,stroke:#1d4ed8,color:#fff
    style P2 fill:#3b82f6,stroke:#1d4ed8,color:#fff
    style B1 fill:#10b981,stroke:#059669,color:#fff
    style B2 fill:#10b981,stroke:#059669,color:#fff
    style B3 fill:#10b981,stroke:#059669,color:#fff
    style B4 fill:#10b981,stroke:#059669,color:#fff
    style B5 fill:#10b981,stroke:#059669,color:#fff

Підсумок GOP:

• Червоний (I): Якірний кадр — повна картинка
• Синій (P): Різниця від попереднього
• Зелений (B): Різниця від попереднього та наступного (найефективніший)

5. H.264: Розтин Одного Кодека

Тепер, коли ми розуміємо що робить стиснення (I/P/B-фрейми, YUV), давайте подивимося як це робить найпопулярніший кодек у світі.

Чому саме H.264?

H.264 (він же MPEG-4 AVC) — це стандарт, який з'явився у 2003 році і досі панує скрізь:

• YouTube (до 1080p)
• Twitch
• Zoom, Teams, FaceTime
• Blu-ray диски
• Ваш телефон

Чому він став стандартом?

• Універсальна підтримка: Працює на будь-якому пристрої від 2010 року
• Апаратне прискорення: Кожен GPU вміє декодувати H.264 без навантаження на CPU
• Баланс: Добра якість при розумному розмірі файлу

Макроблоки: Пазли з Пікселів

H.264 не обробляє відео "попіксельно". Замість цього він ділить кадр на макроблоки розміром 16×16 пікселів.

Для 1920×1080:

• Кількість макроблоків: (1920 / 16) × (1080 / 16) = 120 × 67.5 ≈ 8100 блоків
• Кожен блок може бути закодований по-різному!

Motion Estimation: Гра "Знайди Відмінності"

Найважливіша частина H.264 — оцінка руху (Motion Estimation).

Ідея: Більшість блоків у кадрі №50 майже ідентичні блокам у кадрі №49. Можливо, вони просто трохи зсунулися (людина повернула голову).

Prediction Modes: Передбачення Майбутнього

Для кожного макроблоку кодек вибирає один із режимів:

Transform & Quantization: Викидаємо Непомітне

Після prediction кодек отримує residual (залишок) — різницю між передбаченням та реальністю.

DCT (Discrete Cosine Transform) перетворює ці піксельні дані у частоти:

• Низькі частоти: Плавні переходи (небо, стіна). Важливі.
• Високі частоти: Різкі деталі (текстура тканини, волосся). Менш помітні.

Quantization просто відкидає високі частоти (або сильно їх спрощує).

Entropy Coding: Фінальне Пакування

Після всіх трансформацій кодек отримує набір чисел (motion vectors, residuals, coefficients). Їх треба запакувати ефективно.

H.264 використовує два методи:

• CAVLC (Context-Adaptive Variable-Length Coding): Простіший, швидший. Для Baseline Profile.
• CABAC (Context-Adaptive Binary Arithmetic Coding): Складніший, на 10-15% ефективніший. Для Main/High Profile.

Аналогія: Як ZIP-архів для тексту. Замість "AAAAAABBBB" пишемо "7A4B".

Profiles: Три Рівні Складності

H.264 має кілька "рівнів" (profiles), які визначають, які фішки використовувати.

flowchart TD
    A[Raw Frame\n1920×1080 YUV] --> B[Split into 16×16 Macroblocks]
    B --> C{Intra or Inter?}
    C -->|Intra| D[Intra Prediction\nfrom neighbors]
    C -->|Inter| E[Motion Estimation\nsearch in prev frame]
    E --> F[Motion Vector + Residual]
    D --> G[Residual]
    F --> G
    G --> H[DCT Transform]
    H --> I[Quantization\ndrop high frequencies]
    I --> J[Entropy Coding\nCABAC/CAVLC]
    J --> K[Compressed Bitstream\nH.264]

    style A fill:#3b82f6,stroke:#1d4ed8,color:#fff
    style K fill:#10b981,stroke:#059669,color:#fff
    style C fill:#f59e0b,stroke:#d97706,color:#fff
    style I fill:#ef4444,stroke:#dc2626,color:#fff

6. Бітрейт: Смуга Пропускання та Якість

Якщо кодек — це спосіб пакування валізи, то бітрейт — це швидкість, з якою ви можете ці валізи переносити.

Бітрейт (Bitrate) — це кількість бітів (даних), які обробляються за одиницю часу. Зазвичай вимірюється в Mbps (мегабітах за секунду) для відео та kbps (кілобітах за секунду) для аудіо.

Аналогія із життя: Автомагістраль

Уявіть, що відеодані — це потік автомобілів, які мають дістатися з точки А (сервер) в точку Б (ваш екран).

1. Бітрейт — це кількість смуг на дорозі.
   • Якщо дорога широка (високий бітрейт), багато машин (багата деталізація, 4K, 60 FPS) можуть проїхати швидко і без перешкод.
   • Якщо дорога вузька (низький бітрейт), виникає затор. Кодеку доводиться "викидати" машини або зменшувати їхній розмір (погіршувати якість), щоб вони все ж таки пролізли крізь одну смугу.
2. На що це впливає?
   • Якість: Чим вищий бітрейт, тим менше "квадратиків" (артефактів стиснення) ви бачите.
   • Розмір файлу: Розмір = Бітрейт × Час. 1 година відео з бітрейтом 10 Mbps завжди важитиме більше, ніж з 2 Mbps.
   • Стабільність стрімінгу: Якщо ваш інтернет має швидкість 5 Mbps, а ви намагаєтесь дивитися стрім 10 Mbps — відео буде постійно зупинятися (буферизація).

7. Аудіо: Не менш важливо

З відео розібралися. А звук?

• Sample Rate (Частота дискретизації): 44.1 kHz (CD якість) або 48 kHz (стандарт для відео). Скільки разів на секунду ми "міряємо" звукову хвилю.
• Bit Depth (Розрядність): 16-bit або 24-bit. Точність кожного вимірювання.

Аудіо Кодеки

• AAC (Advanced Audio Coding): Стандарт для MP4/HLS. Якісний, сумісний з усім.
• Opus: Найкращий сучасний кодек. Використовується в WebRTC (Discord, Zoom) та YouTube. Фантастична якість на низьких бітрейтах.
• MP3: Старий дідусь. Працює, але менш ефективний.

8. Демонстрація: Raw vs Compressed

Тепер ваша черга показати це на практиці.

Демо Проєкт: "Вага Пікселів"

У цьому демо ви створите нестиснуте відео і порівняєте його з H.264.

brew install ffmpeg

ffmpeg -f lavfi -i testsrc=duration=5:size=1920x1080:rate=30 -vcodec rawvideo raw_video.yuv

ffmpeg -f lavfi -i testsrc=duration=5:size=1920x1080:rate=30 -c:v libx264 compressed_video.mp4

ls -lh raw_video.yuv compressed_video.mp4

Демо Проєкт 2: "Битва Кодеків"

Тепер давайте порівняємо 4 різні кодеки на одному відео і подивимося, хто переможе.

# Завантаження 10 секунд у високій якості
wget -O bbb_sample.mp4 "https://download.blender.org/demo/movies/BBB/bbb_sunflower_1080p_30fps_normal.mp4"

# Витягнемо лише 10 секунд для швидкості тестування
ffmpeg -i bbb_sample.mp4 -t 10 -c copy bbb_10s.mp4

ffmpeg -i bbb_10s.mp4 -c:v libx264 -b:v 5M -preset medium \
  -c:a aac -b:a 128k output_h264.mp4

ffmpeg -i bbb_10s.mp4 -c:v libx265 -b:v 5M -preset medium \
  -c:a aac -b:a 128k output_h265.mp4

ffmpeg -i bbb_10s.mp4 -c:v libvpx-vp9 -b:v 5M -cpu-used 2 \
  -c:a libopus -b:a 128k output_vp9.webm

ffmpeg -i bbb_10s.mp4 -c:v libaom-av1 -b:v 5M -cpu-used 4 \
  -c:a libopus -b:a 128k output_av1.mkv

9. Резюме

• Кодек ≠ Контейнер.
• Стиснення — це пошук і видалення повторів (в просторі та часі).
• I-frame — це якір. Від нього залежить перемотування відео (seek). Ви не можете почати грати з середини P-фрейму.
• Без стиснення стрімінг був би неможливим.