Настройка Video CDN та стримінгу
Відео — найважчий тип контенту. Пряма раздача з сервера вбиває пропускну здатність. Video CDN розв'язує доставку, транскодування в різні якості та адаптивний бітрейт (ABR).
Cloudflare Stream
# Завантаження відео через 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 плеєром
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`}
/>
);
}
Переваги Cloudflare Stream:
- Автоматичне транскодування у 360p/480p/720p/1080p/1440p
- HLS + DASH адаптивний бітрейт
- Глобальний CDN без додаткової настройки
- Захист від скачування (signed URLs)
Mux: професійна платформа
// Node.js SDK
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,
}}
/>
// Signed URLs для приватного контенту
const token = await mux.jwt.signPlaybackId(playbackId, {
type: 'video',
expiration: '6h',
params: {
aud: 'v', // video
},
});
// URL з підписом
const signedUrl = `https://stream.mux.com/${playbackId}.m3u8?token=${token}`;
Власний HLS-пайплайн через FFmpeg + S3
Настройка Cloudflare Stream або Mux з плеєром — 1–2 робочих дні. Власний HLS-пайплайн з FFmpeg та S3 — 3–5 днів.