Налаштування Video CDN для стрімінгу під ключ

Налаштування Video CDN для стрімінгу

Уявіть: ви запускаєте промо-ролик на сайті, і за хвилину сервер падає від запитів. Буферизація сягає 30 секунд, бітрейт падає до 144p, користувачі йдуть. Ми стикалися з таким десятки разів. Рішення — Video CDN з адаптивним стрімінгом. Він транскодує відео в кілька якостей, кешує на граничних серверах і віддає користувачеві найкращий бітрейт. Адаптивний бітрейт автоматично підбирає якість під швидкість каналу. В результаті LCP (Largest Contentful Paint) скорочується з 10 до 2 секунд, буферизація — до нуля. Наш досвід — 5 років і більше 50 стрімінгових проєктів.

Чому Video CDN кращий за прямий хостинг?

Прямий хостинг відео веде до трьох проблем: перевантаження каналу, відсутність адаптивного бітрейту та діри в безпеці. Video CDN вирішує їх одним махом. Наприклад, Cloudflare Stream економить до 40% трафіку за рахунок кешування та автоматичного вибору роздільності. Mux дає аналітику по кожній сесії — ви бачите, де користувачі перемотують або кидають перегляд. Власний HLS-пайплайн на FFmpeg + S3 дозволяє жорстко контролювати вартість при обсягах від 100 ТБ на місяць.

Як ми налаштовуємо Video CDN для стрімінгу?

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

Cloudflare Stream: швидко та дешево

Підходить для стартапів і середнього бізнесу. Автоматичне транскодування в 360p–1440p, глобальний CDN, захист signed URLs. Ви платите тільки за перегляд — за моделлю pay-as-you-go, що значно дешевше за самостійний хостинг.

# Upload видео через API
curl -X POST "https://api.cloudflare.com/client/v4/accounts/{account_id}/stream" \
  -H "Authorization: Bearer {token}" \
  -F [email protected] \
  -F meta='{"name":"Product Demo"}'

# Response:
# {
#   "uid": "abc123",
#   "thumbnail": "https://videodelivery.net/abc123/thumbnails/thumbnail.jpg",
#   "playback": {
#     "hls": "https://videodelivery.net/abc123/manifest/video.m3u8",
#     "dash": "https://videodelivery.net/abc123/manifest/video.mpd"
#   }
# }

// React компонент с Cloudflare Stream player
import { Stream } from '@cloudflare/stream-react';

export function VideoPlayer({ videoId }: { videoId: string }) {
  return (
    <Stream
      src={videoId}
      controls
      responsive
      preload="metadata"
      poster={`https://videodelivery.net/${videoId}/thumbnails/thumbnail.jpg?time=5s&width=640`}
    />
  );
}

Mux: розумна аналітика та контроль

Обирайте Mux, якщо потрібна детальна статистика по переглядах, A/B-тестування кодеків або підтримка MP4 для завантаження. Розумне кодування (encoding_tier: 'smart') економить бітрейт без втрати якості.

// Node.js SDK import
import Mux from '@mux/mux-node';

const mux = new Mux({
  tokenId: process.env.MUX_TOKEN_ID!,
  tokenSecret: process.env.MUX_TOKEN_SECRET!,
});

// Создание Asset из URL
const asset = await mux.video.assets.create({
  input: [{ url: 'https://storage.mysite.com/raw/video.mp4' }],
  playback_policy: ['public'],
  encoding_tier: 'baseline', // или 'smart' для умного кодирования
  mp4_support: 'standard', // для скачивания
});

console.log(asset.playback_ids?.[0]?.id); // → playback_id для плеера

// Mux Player (встроенный плеер)
import MuxPlayer from '@mux/mux-player-react';

<MuxPlayer
  playbackId={playbackId}
  streamType="on-demand"
  accentColor="#FF0000"
  thumbnailTime={15}
  metadata={{
    video_title: 'Product Demo',
    viewer_user_id: userId,
  }}
/>

Власний HLS-пайплайн: коли він виправданий?

Якщо вам потрібна мінімальна вартість на великих обсягах або специфічні кодеки (HEVC, AV1), будуємо пайплайн на FFmpeg + S3 + Cloudflare. Ручне транскодування дає повний контроль, але потребує DevOps-інженера.

# Транскодирование в HLS (несколько качеств)
ffmpeg -i input.mp4 \
  -filter_complex "[0:v]split=3[v1][v2][v3]; [v1]scale=1920:1080[1080p]; [v2]scale=1280:720[720p]; [v3]scale=854:480[480p]" \
  -map "[1080p]" -c:v libx264 -b:v 4000k -maxrate 4500k -bufsize 9000k \
  -hls_time 6 -hls_playlist_type vod \
  -hls_segment_filename "output/1080p_%03d.ts" output/1080p.m3u8 \

  -map "[720p]" -c:v libx264 -b:v 2000k -maxrate 2500k -bufsize 5000k \
  -hls_time 6 -hls_playlist_type vod \
  -hls_segment_filename "output/720p_%03d.ts" output/720p.m3u8 \

  -map "[480p]" -c:v libx264 -b:v 800k -maxrate 1000k -bufsize 2000k \
  -hls_time 6 -hls_playlist_type vod \
  -hls_segment_filename "output/480p_%03d.ts" output/480p.m3u8 \

  -map 0:a -c:a aac -b:a 128k \
  -hls_time 6 -hls_playlist_type vod \
  -hls_segment_filename "output/audio_%03d.ts" output/audio.m3u8

# Создание мастер-плейлиста
cat > output/master.m3u8 << 'EOF'
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-STREAM-INF:BANDWIDTH=4000000,RESOLUTION=1920x1080
1080p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=2000000,RESOLUTION=1280x720
720p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=800000,RESOLUTION=854x480
480p.m3u8
EOF

# Загрузка на S3 + Cloudflare CDN
aws s3 sync output/ s3://my-videos/videos/video-id/ \
  --content-type "application/x-mpegURL" \
  --exclude "*.ts" \
  --cache-control "max-age=31536000,public"

aws s3 sync output/ s3://my-videos/videos/video-id/ \
  --exclude "*.m3u8" \
  --content-type "video/MP2T" \
  --cache-control "max-age=31536000,public"

Порівняння рішень: Cloudflare Stream vs Mux vs власний HLS

Результати впровадження Video CDN

Cloudflare Stream скорочує час налаштування в 5–10 разів у порівнянні з самописним HLS, а Mux покращує LCP на 80% за рахунок розумного кодування.

Процес роботи та терміни

1. Аналітика — аудит поточної відеоінфраструктури, вимірювання буферизації та LCP. (1 день)
2. Проектування — вибір платформи, архітектури та схеми захисту. (1 день)
3. Реалізація — налаштування транскодування, CDN та інтеграція плеєра. (1–3 дні)
4. Тестування — перевірка на мобільних пристроях, 3G/4G, різних браузерах. (1 день)
5. Деплой — запуск у продакшен, передача документації та навчання команди. (1 день)

Терміни — від 1 дня для Cloudflare Stream до 5 днів для власного HLS. Вартість розраховується індивідуально і залежить від обсягів трафіку, кількості відео та необхідного рівня кастомізації. Отримайте консультацію — ми оцінимо ваш проєкт за 1 день.

Що входить у роботу?

• Аудит поточної відеоінфраструктури та рекомендації щодо оптимізації.
• Налаштування транскодування та CDN (Cloudflare Stream / Mux / власний HLS).
• Інтеграція плеєра (React, Vue, Angular, vanilla JS).
• Захист контенту (signed URLs, JWT, геоблокування).
• Документація з експлуатації та навчання команди.
• Підтримка протягом 30 днів після запуску.

Чому обирають нашу реалізацію?

Ми гарантуємо стабільну роботу Video CDN з SLA 99.9%. Використовуємо ліцензійне ПЗ та сертифікованих провайдерів — Cloudflare, Mux, AWS. Наші інженери мають сертифікати Cloudflare та Mux. Ви отримуєте готову інфраструктуру з документацією та навчанням. Зв'яжіться з нами, щоб обговорити ваш проєкт — ми підготуємо пропозицію за 1 день. Замовте налаштування Video CDN і забудьте про буферизацію.

Cloudflare Stream documentation, Mux docs